3-5问题
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<!-- <script src="jQuery/script.js"></script> -->
<script src="jQuery/jquery.js"></script>
</head>
<body>
<div class="main" id="wrap">
<div class="box">
<img src="img/1.png">
<a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
</div>
<div class="box">
<img src="img/2.png">
<a href="http://www.imooc.com">第二怪 草帽当锅盖</a>
</div>
<div class="box">
<img src="img/3.png">
<a href="http://www.imooc.com">第三怪 这边下雨那边晒</a>
</div>
<div class="box">
<img src="img/4.png">
<a href="http://www.imooc.com">第四怪 四季服装同穿戴</a>
</div>
<div class="box">
<img src="img/5.png">
<a href="http://www.imooc.com">第五怪 火车没有汽车快</a>
</div>
<div class="box">
<img src="img/6.png">
<a href="http://www.imooc.com">第六怪 火车不通国内通国外</a>
</div>
<div class="box">
<img src="img/7.png">
<a href="http://www.imooc.com">第七怪 老奶爬山比猴快</a>
</div>
<div class="box">
<img src="img/8.png">
<a href="http://www.imooc.com">第八怪 鞋子后面多一块</a>
</div>
<div class="box">
<img src="img/9.png">
<a href="http://www.imooc.com">第九怪 脚趾四季露在外</a>
</div>
<div class="box">
<img src="img/10.png">
<a href="http://www.imooc.com">第十怪 鸡蛋拴着卖</a>
</div>
<div class="box">
<img src="img/11.png">
<a href="http://www.imooc.com">第十一怪 粑粑叫饵快</a>
</div>
<div class="box">
<img src="img/12.png">
<a href="http://www.imooc.com">第十二怪 花生蚕豆数着卖</a>
</div>
<div class="box">
<img src="img/13.png">
<a href="http://www.imooc.com">第十三怪 三个蚊子一盘菜</a>
</div>
<div class="box">
<img src="img/14.png">
<a href="http://www.imooc.com">第十四怪 四个老鼠一麻袋</a>
</div>
<div class="box">
<img src="img/15.png">
<a href="http://www.imooc.com">第十五怪 树上松毛扭着买</a>
</div>
<div class="box">
<img src="img/16.png">
<a href="http://www.imooc.com">第十六怪 姑娘叫老太</a>
</div>
<div class="box">
<img src="img/17.png">
<a href="http://www.imooc.com">第十七怪 小和尚可以谈恋爱</a>
</div>
<div class="box">
<img src="img/18.png">
<a href="http://www.imooc.com">第十八怪 背着娃娃谈恋爱</a>
</div>
</div>
</body>
</html>
css:
*{padding: 0;margin: 0;}
body{background: #ddd;}
.main{width: auto;height: auto;margin: 0 auto;position: relative;}
.box{width: 280px;height: auto;background: #fff;float: left;margin: 10px;padding: 10px;box-sizing:border-box;
border-radius: 5px;}
.box img{width: 100%;}
.box a{text-decoration: none;color: #444;display: block;text-align: center;font-weight: bold;font-size: 18px;
line-height: 40px;}
jquery:
$(function(){
var wrap=$('#wrap');
var box=wrap.children('div');
// console.log(box);
waterFull(wrap,box);
//瀑布流的主函数
function waterFull(wrap,box){
//获取宽度，使整个盒子居中
var boxWidth=box.eq(0).width()+40;
var cols=Math.floor($(window).width()/boxWidth);
wrap.width(cols*boxWidth);
// console.log(cols);
//实现整个瀑布流的页面布局
var allHeight=new Array();
for (var i = 0; i < box.length; i++) {
if (i<cols) {
allHeight[i]=box.eq(i).height()+40;
// console.log(allHeight);
}
else{
var minHeight=Math.min.apply(null,allHeight);
// console.log(minHeight);
var index=getIndex(minHeight,allHeight);
// console.log(index);
var left=box.eq(index).position().left;
box.eq(i).css({
'position':'absolute',
'left':left,
'top':minHeight,
'opacity':'0'
}).stop().animate({
'opacity':'1'
},1000);
allHeight[index]+=box.eq(i).height()+40;
}
}
function getIndex(minHeight,allHeight){
for (var i = 0; i < allHeight.length; i++) {
if (allHeight[i]===minHeight) {
return i;
}
}
}
}
})
为什么最后出来的结果是这样的？代码哪里有问题啊？有的时候页面布局又是正常的，有的时候又是乱七八糟的，这是为啥?
正在回答
你好，你可以使用本地的jQuery文件测试下，是没有问题的哟，cdn地址会受网速的影响，jQuery文件没有加载出来，页面就会乱哟。
祝学习愉快~
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星