没有提醒错误，但是效果没有实现欸
<!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;
setStyle(boxes.eq(i),minHeight,leftValue,i);
// 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 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=$('.boxes');
var lastBoxTop=boxes.eq(boxes.length-1).offset().top;
var lastHeight=boxes.eq(boxes.length-1).height()+20;
var lastColHeight=lastBoxTop+lastHeight;
return documentHeight+scrollHeight>=lastColHeight ? true : false;
}
// 加载盒子
var appendBox=function(wrap) {
if(getCheck(wrap)){
for(i in data){
var innerString='<div class="boxes"><img src="img/'+data[i].src+'"><a href="http://www.imooc.com">'+data[i].title+'</a></div>';
wrap.append(innerString);
}
}else{
return false;
}
waterfall(wrap,$('.boxes'));
// 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);
})
})1
收起
正在回答
2回答
同学你好，这是因为火狐浏览器跟谷歌浏览器计算精确度不同造成的原因。
谷歌后面只有这几个小数：
火狐：
解决办法：
通过paseInt（）对获取出来的数进行取整，参考下图：
自己试一试哦，如果帮助到了你，欢迎采纳。
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星