滚动效果没有实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/json.js"></script>
<script src="js/jQuery.js"></script>
</head>
<body>
<div id="wrap">
<div><img src="images/1.png"><a href="http://www.imooc.com">第一怪 竹筒当烟袋</a></div>
<div><img src="images/2.png"><a href="http://www.imooc.com">第二怪 草帽当锅盖</a></div>
<div><img src="images/3.png"><a href="http://www.imooc.com">第三怪 这边下雨那边晒</a></div>
<div><img src="images/4.png"><a href="http://www.imooc.com">第四怪 四季服装同穿戴</a></div>
<div><img src="images/5.png"><a href="http://www.imooc.com">第五怪 火车没有汽车快</a></div>
<div><img src="images/6.png"><a href="http://www.imooc.com">第六怪 火车不通国内通国外</a></div>
<div><img src="images/7.png"><a href="http://www.imooc.com">第七怪 老奶爬山比猴快</a></div>
<div><img src="images/8.png"><a href="http://www.imooc.com">第八怪 鞋子后面多一块</a></div>
<div><img src="images/9.png"><a href="http://www.imooc.com">第九怪 脚趾四季露在外</a></div>
<div><img src="images/10.png"><a href="http://www.imooc.com">第十怪 鸡蛋栓着卖</a></div>
<div><img src="images/11.png"><a href="http://www.imooc.com">第十一怪 粑粑叫饵块</a></div>
<div><img src="images/12.png"><a href="http://www.imooc.com">第十二怪 花生蚕豆数着卖</a></div>
<div><img src="images/13.png"><a href="http://www.imooc.com">第十三怪 三个蚊子一盘菜</a></div>
<div><img src="images/14.png"><a href="http://www.imooc.com">第十四怪 四个竹鼠一麻袋</a></div>
<div><img src="images/15.png"><a href="http://www.imooc.com">第十五怪 树上松毛扭着卖</a></div>
<div><img src="images/16.png"><a href="http://www.imooc.com">第十六怪 姑娘叫老太</a></div>
<div><img src="images/17.png"><a href="http://www.imooc.com">第十七怪 小和尚可以谈恋爱</a></div>
<div><img src="images/18.png"><a href="http://www.imooc.com">第十八怪 背着娃娃再恋爱</a></div>
</div>
</body>
</html>
body{
background: #ddd;
}
img{
border: none;
}
a{
text-decoration: none;
color: #444;
}
a:hover{
color: #999;
}
/* Wrap */
#wrap{
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap div{
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap img{
width: 100%;
}
#wrap a{
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
var waterfall=function(wrap,boxes){
//获取到屏幕可以显示的列数
var boxWidth=boxes.eq(0).outerWidth(true),
windowWidth=$(window).width(),
colsNumber=Math.floor(windowWidth/boxWidth);
//设置容器的宽度
wrap.width(boxWidth*colsNumber);
//定义一个数组并存储每一列的高度
var everyHeight=[];
for(var i=0;i<boxes.length;i++){
if(i<colsNumber){
everyHeight[i]=boxes.eq(i).outerHeight(true);
}else{
var minHeight=Math.min.apply(null,everyHeight),
minIndex=getIndex(minHeight,everyHeight);
setStyle(boxes.eq(i),minHeight,boxes.eq(minIndex).position().left,i);
everyHeight[minIndex]+=boxes.eq(i).outerHeight(true);
}
}
}
//获取最小列的索引
function getIndex(minHeight,everyHeight){
for(index in everyHeight){
if(everyHeight[index]==minHeight){
return index;
}
}
}
//数据请求检验
var getCheck=function(wrap){
//获取文档高度
var documentHeight=$(window).height(),
//获取文档向上滚动的高度
scrollHeight=$(window).scrollTop(),
//最后一个盒子所在列的总高度
boxes=wrap.children('div'),
lastBoxTop=boxes.eq(boxes.length-1).offset().top,
lastHeight=boxes.eq(boxes.length-1).height(),
lastColHeight=lastBoxTop+lastHeight;
return documentHeight+scrollHeight>=lastHeight?true:false;
}
//追加盒子函数
var appendBox=function(wrap,boxes){
if(getCheck(wrap)){
for(i in data){
var innerString='<div><img src="images/'+data[i].src+'"><a href="http://www.imooc.com" target="_blank">'+data[i].title+'</a></div>'
wrap.append(innerString);
}
}else{
return false;
}
waterfall(wrap,wrap.children('div'));
}
//设置追加盒子的样式
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'
},1000);
getStartNumber=index;
}
$(function(){
var wrap=$('#wrap'),
boxes=$('#wrap').children('div');
waterfall(wrap,boxes);
$(this).scroll(function(event){
appendBox(wrap,boxes);
});
});
//模拟数据Json
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":"第十八怪 背着娃娃再恋爱"
}];
正在回答
同学，你好。这是因为你的判断条件写错了。如图：
这里应该是大于等于lastColHeight的值。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星