3-5随堂练习问题
来源：3-3 使用Jquery完成定位布局
Aaashin3775583
2017-08-04 13:58:05
<!DOCTYPE html>
<html>
<head>
<title>瀑布流</title>
<meta charset="utf-8">
<title>瀑布流-云南十八怪</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;border: 0;}
body{background-color: #ddd;}
img{border: 0}
a{text-decoration: none;color: #444;}
a:hover{color: #999;}
.waterfall-wrap{
width: auto;
height: auto;
margin: 0 auto;
position: relative;
}
.waterfall-wrap>div{
float: left;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
}
.waterfall-wrap>div>img{width: 100%;}
.waterfall-wrap>div>a{
display: block;
text-align:center;
font-size: 18px;
font-weight: bold;
line-height: 40px;
}
</style>
</head>
<body>
<div id="waterfall-wrap" class="waterfall-wrap">
<div>
<img src="img/1.png">
<a href="http://www.imooc.com" target="_blank">第一怪 竹筒当烟袋</a>
</div>
<div>
<img src="img/2.png">
<a href="http://www.imooc.com" target="_blank">第二怪 草帽当锅盖</a>
</div>
<div>
<img src="img/3.png">
<a href="http://www.imooc.com" target="_blank">第三怪 这边下雨那边晒</a>
</div>
<div>
<img src="img/4.png">
<a href="http://www.imooc.com" target="_blank">第四怪 四季服装同穿戴</a>
</div>
<div>
<img src="img/5.png">
<a href="http://www.imooc.com" target="_blank">第五怪 火车没有汽车快</a>
</div>
<div>
<img src="img/6.png">
<a href="http://www.imooc.com" target="_blank">第六怪 火车不通国内通国外</a>
</div>
<div>
<img src="img/7.png">
<a href="http://www.imooc.com" target="_blank">第七怪 老奶爬山比猴快</a>
</div>
<div>
<img src="img/8.png">
<a href="http://www.imooc.com" target="_blank">第八怪 鞋子后面多一块</a>
</div>
<div>
<img src="img/9.png">
<a href="http://www.imooc.com" target="_blank">第九怪 脚趾四季露在外</a>
</div>
<div>
<img src="img/10.png">
<a href="http://www.imooc.com" target="_blank">第十怪 鸡蛋拴着卖</a>
</div>
<div>
<img src="img/11.png">
<a href="http://www.imooc.com" target="_blank">第十一怪 粑粑叫饵块</a>
</div>
<div>
<img src="img/12.png">
<a href="http://www.imooc.com" target="_blank">第十二怪 花生蚕豆数着卖</a>
</div>
<div>
<img src="img/13.png">
<a href="http://www.imooc.com" target="_blank">第十三怪 三个蚊子一盘菜</a>
</div>
<div>
<img src="img/14.png">
<a href="http://www.imooc.com" target="_blank">第十四怪 四个老鼠一麻袋</a>
</div>
<div>
<img src="img/15.png">
<a href="http://www.imooc.com" target="_blank">第十五怪 树上松毛扭着卖</a>
</div>
<div>
<img src="img/16.png">
<a href="http://www.imooc.com" target="_blank">第十六怪 姑娘叫老太</a>
</div>
<div>
<img src="img/17.png">
<a href="http://www.imooc.com" target="_blank">第十七怪 小和尚可以谈恋爱</a>
</div>
<div>
<img src="img/18.png">
<a href="http://www.imooc.com" target="_blank">第十八怪 背着娃娃谈恋爱</a>
</div>
</div>
</body>
<script>
$(function(){
var fallwrap=$('#waterfall-wrap');
var boxes=fallwrap.children('div');//children() 方法返回返回被选元素的所有直接子元素。
waterfallFun(fallwrap,boxes);
function waterfallFun(wrap,boxes){
var boxWidth=boxes.eq(0).width()+40;
var windowWidth=$(window).width();
var colsNumber=Math.floor(windowWidth/boxWidth)
// 设置容器的宽度
wrap.width(boxWidth*colsNumber);
// 定义一个数组并存储每一列的高度
var everyH=new Array();
for(var i=0;i<boxes.length;i++){
if(i<colsNumber){
everyH[i]=boxes.eq(i).height+40;
}else{
var minH=Math.min.apply(null,everyH);
// console.log(minH)
var minIndex=getMinIndex(minH,everyH);
boxes.eq(i).css({
"position":"absolute",
"top":minH,
"left":boxes.eq(minIndex).position().left
})
everyH[minIndex]+=boxes.eq(i).height()+40;
}
}
}
// 获取最小列的索引
function getMinIndex(minH,everyH){
for(index in everyH){
if(everyH[index] == minH){
console.log(1)
return index;
};
};
};
})
</script>
</html>问题：报错说 Cannot read property 'left' of undefined，自己在控制台打印minH值为NAN，不知道问题在哪，感觉参数传的没问题，求帮解决！
附：代码除了图片全都在上面了
附：报错问题：
写回答
4回答
-
好帮手慕糖
2017-08-07
你好，这个应该跟逻辑没什么关系，就算放在下面，我这里多刷几次，也会出错，建议：再将老师的代码好好看下。祝学习愉快！
0 -
Aaashin3775583
提问者
2017-08-06
<!DOCTYPE html> <html> <head> <title>瀑布流</title> <meta charset="utf-8"> <title>瀑布流-云南十八怪</title> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <style type="text/css"> *{margin: 0;padding: 0;border: 0;} body{background-color: #ddd;} img{border: 0} a{text-decoration: none;color: #444;} a:hover{color: #999;} .waterfall-wrap{ width: auto; height: auto; margin: 0 auto; position: relative; } .waterfall-wrap>div{ float: left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width: 280px; height: auto; margin: 10px; padding: 10px; background-color: #fff; border-radius: 5px; } .waterfall-wrap>div>img{width: 100%;} .waterfall-wrap>div>a{ display: block; text-align:center; font-size: 18px; font-weight: bold; line-height: 40px; } </style> <script> $(function(){ var fallwrap=$('#waterfall-wrap'); var boxes=fallwrap.children('div');//children() 方法返回返回被选元素的所有直接子元素。 waterfallFun(fallwrap,boxes); function waterfallFun(wrap,boxes){ var boxWidth=boxes.eq(0).width()+40; var windowWidth=$(window).width(); var colsNumber=Math.floor(windowWidth/boxWidth) // 设置容器的宽度 wrap.width(boxWidth*colsNumber); // 定义一个数组并存储每一列的高度 var everyH=new Array(); for(var i=0;i<boxes.length;i++){ if(i<colsNumber){ everyH[i]=boxes.eq(i).height()+40; }else{ var minH=Math.min.apply(null,everyH); // console.log(minH) var minIndex=getMinIndex(minH,everyH); boxes.eq(i).css({ "position":"absolute", "top":minH, "left":boxes.eq(minIndex).position().left }) everyH[minIndex]+=boxes.eq(i).height()+40; } } } // 获取最小列的索引 function getMinIndex(minH,everyH){ for(index in everyH){ if(everyH[index] == minH){ console.log(1) return index; }; }; }; }) </script> </head> <body> <div id="waterfall-wrap" class="waterfall-wrap"> <div> <img src="img/1.png"> <a href="http://www.imooc.com" target="_blank">第一怪 竹筒当烟袋</a> </div> <div> <img src="img/2.png"> <a href="http://www.imooc.com" target="_blank">第二怪 草帽当锅盖</a> </div> <div> <img src="img/3.png"> <a href="http://www.imooc.com" target="_blank">第三怪 这边下雨那边晒</a> </div> <div> <img src="img/4.png"> <a href="http://www.imooc.com" target="_blank">第四怪 四季服装同穿戴</a> </div> <div> <img src="img/5.png"> <a href="http://www.imooc.com" target="_blank">第五怪 火车没有汽车快</a> </div> <div> <img src="img/6.png"> <a href="http://www.imooc.com" target="_blank">第六怪 火车不通国内通国外</a> </div> <div> <img src="img/7.png"> <a href="http://www.imooc.com" target="_blank">第七怪 老奶爬山比猴快</a> </div> <div> <img src="img/8.png"> <a href="http://www.imooc.com" target="_blank">第八怪 鞋子后面多一块</a> </div> <div> <img src="img/9.png"> <a href="http://www.imooc.com" target="_blank">第九怪 脚趾四季露在外</a> </div> <div> <img src="img/10.png"> <a href="http://www.imooc.com" target="_blank">第十怪 鸡蛋拴着卖</a> </div> <div> <img src="img/11.png"> <a href="http://www.imooc.com" target="_blank">第十一怪 粑粑叫饵块</a> </div> <div> <img src="img/12.png"> <a href="http://www.imooc.com" target="_blank">第十二怪 花生蚕豆数着卖</a> </div> <div> <img src="img/13.png"> <a href="http://www.imooc.com" target="_blank">第十三怪 三个蚊子一盘菜</a> </div> <div> <img src="img/14.png"> <a href="http://www.imooc.com" target="_blank">第十四怪 四个老鼠一麻袋</a> </div> <div> <img src="img/15.png"> <a href="http://www.imooc.com" target="_blank">第十五怪 树上松毛扭着卖</a> </div> <div> <img src="img/16.png"> <a href="http://www.imooc.com" target="_blank">第十六怪 姑娘叫老太</a> </div> <div> <img src="img/17.png"> <a href="http://www.imooc.com" target="_blank">第十七怪 小和尚可以谈恋爱</a> </div> <div> <img src="img/18.png"> <a href="http://www.imooc.com" target="_blank">第十八怪 背着娃娃谈恋爱</a> </div> </div> </body> </html>将脚本放在头部head里面，第一次刷新没问题；但第二次刷新就有问题，图片显示如下：
0 -
好帮手慕糖
2017-08-06
你好，经测试是没有问题的哟，请确认是否放置在<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>文件下面。祝学习愉快！
0h017-08-06 -
好帮手慕糖
2017-08-04
你好，代码135行everyH[i]=boxes.eq(i).height+40;中height是个方法，应该是height();祝学习愉快！
0h017-08-05
相似问题