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