麻烦老师帮我检查一下代码哪里有误，达不到功能
var data = [{
"src": "1.png",
"title": "第一怪 竹筒当烟袋"
}, {
"src": "2.png",
"title": "第二怪 草帽当锅盖"
}, {
"src": "3.png",
"title": "第三怪 这边下雨那边晒"
}, {
"src": "4.png",
"title": "第四怪 四季服装同穿戴"
}, {
"src": "5.png",
"title": "第五怪 火车没有汽车快"
}, {
"src": "6.png",
"title": "第六怪 火车不通国内通国外"
}, {
"src": "7.png",
"title": "第七怪 老奶爬山比猴快"
}, {
"src": "8.png",
"title": "第八怪 鞋子后面多一块"
}, {
"src": "9.png",
"title": "第九怪 脚趾四季露在外"
}, {
"src": "10.png",
"title": "第十怪 鸡蛋拴着卖"
}, {
"src": "11.png",
"title": "第十一怪 粑粑叫饵块"
}, {
"src": "12.png",
"title": "第十二怪 花生蚕豆数着卖"
}, {
"src": "13.png",
"title": "第十三怪 三个蚊子一盘菜"
}, {
"src": "14.png",
"title": "第十四怪 四个老鼠一麻袋"
}, {
"src": "15.png",
"title": "第十五怪 树上松毛扭着卖"
}, {
"src": "16.png",
"title": "第十六怪 姑娘叫老太"
}, {
"src": "17.png",
"title": "第十七怪 小和尚可以谈恋爱"
}, {
"src": "18.png",
"title": "第十八怪 背着娃娃谈恋爱"
}];
var waterfall=function(wrap,boxes){
var boxWidth=boxes.eq(0).width()+40;
var windowWidth=$(window).width();
var colNum=Math.floor(windowWidth/boxWidth);//加入colnum的值为6
wrap.width(colNum*boxWidth);
var everyHeight=new Array();
for(var i=0;i<boxes.length;i++){
if (i<colNum) { //i的值为0 1 2 3 4 5
everyHeight[i]=boxes.eq(i).height()+40;
}else{//i的值就是6 7 8 9 ····
var minHeight=Math.min.apply(null,everyHeight);
var minIndex=getIndex(minHeight,everyHeight);
setStyle(boxes.eq(i),minHeight,boxes.eq(minIndex).position().left,i);
everyHeight[minIndex]+=boxes.eq(i).height()+40;
}
}
}
function getIndex(minHeight,everyHeight){
for(index in everyHeight){
if(everyHeight[index]==minHeight){
return index;
}
}
}
var getStartNumber=0;
var setStyle=function(box,top,left,index){
if (getStartNumber>=index) {
return false;
}
box.css({
'position':'absolute',
'top':top,
'left':left,
'opacity':'0'
}).stop().animate({
'opacity':'1'
},500);
getStartNumber=index;
}
// 数据请求检验
var getcheck=function(wrap){
var documentHeight=$(window).height();
var scrollHeigh=$(window).scrollTop();
var boxes=wrap.children('div');
var lastBoxTop=boxes.eq(boxes.length-1).offset().top;//boxes.last()
var lastHeight=boxes.eq(boxes.length-1).height+20;
var lastColHeight=lastBoxTop+lastHeight;
return documentHeight+scrollHeigh>=lastColHeight? true:false;
}
var appendBox=function(wrap){
if (getcheck(wrap)) {
for(i in data){
var innerString='<div class="box"><img src="imgs/'+data[i].src+'" alt=""></div>';
wrap.append(innerString);
}
}
else{
return false;
};
waterfall(wrap,wrap.children('div'));
}
$(document).ready(function(){
var wrap=$('.wrap');
var boxes=$('.wrap').children('div');
waterfall(wrap,boxes);
$(this).scroll(function(event){
appendBox(wrap,boxes)
})
})
老师可以帮我看一下为什么不能有到最下面那张才加载下一行的图片的功能，麻烦老师了，谢谢
CSS：代码
*{margin:0;border:0;border:none;}
body{background: #ddd;}
.wrap{width: auto;height: auto;position: relative;margin:0 auto;}
.wrap .box{float: left;width:280px;height: auto;margin: 10px;padding:10px;box-sizing: border-box;border-radius: 5px;background: #fff;}
.wrap .box img{width: 260px;margin:0 auto;}
html：代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Waterfall</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
</head>
<body>
<div>
<div><img src="imgs/1.png" alt=""></div>
<div><img src="imgs/2.png" alt=""></div>
<div><img src="imgs/3.png" alt=""></div>
<div><img src="imgs/4.png" alt=""></div>
<div><img src="imgs/5.png" alt=""></div>
<div><img src="imgs/6.png" alt=""></div>
<div><img src="imgs/7.png" alt=""></div>
<div><img src="imgs/8.png" alt=""></div>
<div><img src="imgs/9.png" alt=""></div>
<div><img src="imgs/10.png" alt=""></div>
<div><img src="imgs/11.png" alt=""></div>
<div><img src="imgs/12.png" alt=""></div>
<div><img src="imgs/13.png" alt=""></div>
<div><img src="imgs/14.png" alt=""></div>
<div><img src="imgs/15.png" alt=""></div>
<div><img src="imgs/16.png" alt=""></div>
<div><img src="imgs/17.png" alt=""></div>
<div><img src="imgs/18.png" alt=""></div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
height是个方法，要加括号
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星