jq实现瀑布流布局遇到一个问题，第一次可以完整展示瀑布流效果，但是当刷新网页后就不能正常显示瀑布流了
$(function(){
var wrap = $('#wrap');
var boxes = $('.item');
console.log(boxes.eq(0).height());
});
在执行这个代码时，正确情况下是该输出第一个盒子的高度，但是在chrome的浏览器开发工具中的console口中输出时，刷新网页会有两种结果，一个第一盒子的高度，另一个就是56，不知道为什么？
正在回答 回答被采纳积分+1
<!DOCTYPE html>
<html>
<head>
<title>瀑布流布局</title>
<!-- <link rel="stylesheet" type="text/css" href="css/waterfall.css"> -->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/waterfall.js"></script> -->
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
color:#444;
}
a:hover{
color: #999;
}
img{
border: none;
}
body{
background: #ddd;
}
.wrap{
position: relative;
width: auto;
height: auto;
margin:0 auto;
}
.item{
box-sizing: border-box;
width: 280px;
height: auto;
float: left;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
.item img{
width: 100%;
height: auto;
}
.item a{
display: block;
font-size: 18px;
line-height: 40px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="item">
<img src="img/1.png" />
<a href="#">第一怪</a>
</div>
<div class="item">
<img src="img/2.png" />
<a href="#">第二怪</a>
</div>
<div class="item">
<img src="img/3.png" />
<a href="#">第三怪</a>
</div>
<div class="item">
<img src="img/4.png" />
<a href="#">第四怪</a>
</div>
<div class="item">
<img src="img/5.png" />
<a href="#">第五怪</a>
</div>
<div class="item">
<img src="img/6.png" />
<a href="#">第六怪</a>
</div>
<div class="item">
<img src="img/7.png" />
<a href="#">第七怪</a>
</div>
<div class="item">
<img src="img/8.png" />
<a href="#">第八怪</a>
</div>
<div class="item">
<img src="img/9.png" />
<a href="#">第九怪</a>
</div>
<div class="item">
<img src="img/10.png" />
<a href="#">第十怪</a>
</div>
<div class="item">
<img src="img/11.png" />
<a href="#">十一怪</a>
</div>
<div class="item">
<img src="img/12.png" />
<a href="#">第十二怪</a>
</div>
<div class="item">
<img src="img/13.png" />
<a href="#">第十三怪</a>
</div>
<div class="item">
<img src="img/14.png" />
<a href="#">第十四怪</a>
</div>
<div class="item">
<img src="img/15.png" />
<a href="#">第十五怪</a>
</div>
<div class="item">
<img src="img/16.png" />
<a href="#">第十六怪</a>
</div>
<div class="item">
<img src="img/17.png" />
<a href="#">第十七怪</a>
</div>
<div class="item">
<img src="img/18.png" />
<a href="#">第十八怪</a>
</div>
</div>
</body>
<script type="text/javascript" >
$(function(){
var wrap = $('#wrap');
var boxes = $('.item');
console.log(boxes.eq(0).height());
waterfall(wrap,boxes);
});
// 获取索引函数
function getIndex(minHeight,everyHeight){
for(index in everyHeight){
if(everyHeight[index] == minHeight){
return index;
}
}
}
// 瀑布流函数
function waterfall(wrap,boxes){
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colNum = Math.floor(windowWidth / boxWidth);
wrap.width(colNum * boxWidth);
var everyHeight = new Array();
for(var i=0;i<boxes.length;i++){
if(i < colNum){
everyHeight[i] = boxes.eq(i).height() + 40;
}else{
var minHeight = Math.min.apply(null,everyHeight);
var minIndex = getIndex(minHeight,everyHeight);
var leftValue = boxes.eq(minIndex).position().left;
boxes.eq(i).css({
'position':'absolute',
'top':minHeight ,
'left':leftValue ,
});
everyHeight[minIndex] += boxes.eq(i).height() + 40;
}
}
console.log(boxes.eq(2).height());
}
</script>
</html>
看chrome的控制台的输出为56，这条代码console.log(boxes.eq(2).height())的输出结果不对，应该是第二个盒子的高度。代码和学中一样，不知道哪里出了问题
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星