4-4老师帮忙看下 我是跟着视频做练习 为什么最后新加的盒子会有叠加情况
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>瀑布流实例</title> </head> <body> <div id="wrap"> <div> <img src="image/1.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/2.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/3.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/4.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/5.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/6.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/7.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/8.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/9.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/10.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/11.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/12.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/13.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/14.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/15.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/16.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/17.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/18.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/19.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/20.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/21.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/22.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/23.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/24.png"/> <a href="#">这是一段链接文字</a> </div> <div> <img src="image/25.png"/> <a href="#">这是一段链接文字</a> </div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
*{
margin: 0;
padding: 0;
border: none;
}
body{
background: #ddd;
}
img {
border: none;
}
a{
text-decoration: none;
color: #444;
}
a:hover{
color: #999;
}
#wrap{
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap > div{
float: left;
width: 280px;
height: auto;
margin: 10px;
box-sizing: border-box;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap > div > img{
width: 100%;
}
#wrap > div > a{
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}var data = [{
"src":"26.png"
},{
"src":"27.png"
},{
"src":"28.png"
},{
"src":"29.png"
},{
"src":"30.png"
},{
"src":"31.png"
},{
"src":"32.png"
},{
"src":"33.png"
},{
"src":"34.png"
},{
"src":"35.png"
},{
"src":"36.png"
},{
"src":"37.png"
},{
"src":"38.png"
},{
"src":"39.png"
},{
"src":"40.png"
},{
"src":"41.png"
},{
"src":"42.png"
},{
"src":"43.png"a
},{
"src":"44.png"
},{
"src":"45.png"
},{
"src":"46.png"
}]
function waterfall(wrap,boxes){
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth/boxWidth);
wrap.width(boxWidth * colsNumber);
var everyHight = new Array();
for(var i = 0; i<boxes.length; i++){
if (i<colsNumber) {
everyHight[i] = boxes.eq(i).height() + 40;
}else{
var minHeight = Math.min.apply(null,everyHight);
var minIndex = getIndex(minHeight,everyHight);
setStyle(boxes.eq(i),minHeight,boxes.eq(minIndex).position().left,i);
everyHight[minIndex] += boxes.eq(i).height()+40;
};
}
}
function getIndex(minHeight, everyHight){
for (index in everyHight) {
if (everyHight[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'
},1000);
getStartNumber = index;
};
var appendBox = function(wrap){
for(i in data){
var innerString = '<div><img src="image/' + data[i].src + '"/><a href="#">这是一段链接文字</a><div>';
wrap.append(innerString);
};
waterfall(wrap,wrap.children('div'));
};
$(document).ready(function(event){
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap,boxes);
$(this).scroll(function(event){
appendBox(wrap);
});
});
新加的盒子会出现如图的叠加现象，检查了很多遍没看出原因
23
收起
正在回答 回答被采纳积分+1
2回答
在此部分所写了一个a,不知道是在书写代码的时候不小心按错了,还是粘贴的时候出现的,
相似问题
为什么最后一个盒子的高度是加20，不是40吗
23
0
7
关于瀑布流追加盒子，添加CSS样式的函数
0
0
3
4-6数据请求检验问题？
52
0
8
4-4练习，为什么会把header盒子顶下来？
8
0
3
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星