3-5问题

首页课程实战体系课手记专栏慕课教程

3-5问题

来源：3-3 使用Jquery完成定位布局

qq_如果没有晴天_0

2017-09-17 11:01:14

html:

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<a href="http://www.imooc.com">第一怪竹筒当烟袋</a>

</div>

<a href="http://www.imooc.com">第二怪草帽当锅盖</a>

</div>

<a href="http://www.imooc.com">第三怪这边下雨那边晒</a>

</div>

<a href="http://www.imooc.com">第四怪四季服装同穿戴</a>

</div>

<a href="http://www.imooc.com">第五怪火车没有汽车快</a>

</div>

<a href="http://www.imooc.com">第六怪火车不通国内通国外</a>

</div>

<a href="http://www.imooc.com">第七怪老奶爬山比猴快</a>

</div>

<a href="http://www.imooc.com">第八怪鞋子后面多一块</a>

</div>

<a href="http://www.imooc.com">第九怪脚趾四季露在外</a>

</div>

<a href="http://www.imooc.com">第十怪鸡蛋拴着卖</a>

</div>

<a href="http://www.imooc.com">第十一怪粑粑叫饵快</a>

</div>

<a href="http://www.imooc.com">第十二怪花生蚕豆数着卖</a>

</div>

<a href="http://www.imooc.com">第十三怪三个蚊子一盘菜</a>

</div>

<a href="http://www.imooc.com">第十四怪四个老鼠一麻袋</a>

</div>

<a href="http://www.imooc.com">第十五怪树上松毛扭着买</a>

</div>

<a href="http://www.imooc.com">第十六怪姑娘叫老太</a>

</div>

<a href="http://www.imooc.com">第十七怪小和尚可以谈恋爱</a>

</div>

<a href="http://www.imooc.com">第十八怪背着娃娃谈恋爱</a>

</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;

}

})

为什么最后出来的结果是这样的？代码哪里有问题啊？有的时候页面布局又是正常的，有的时候又是乱七八糟的，这是为啥?

写回答

4回答

好帮手慕糖

2017-09-19

已采纳

你好，你可以使用本地的jQuery文件测试下，是没有问题的哟，cdn地址会受网速的影响，jQuery文件没有加载出来，页面就会乱哟。

祝学习愉快~

hq_如果没有晴天_0

h 非常感谢！

h017-10-04

共3条回复

NanAyo

2017-09-28

你好我也是你这个问题，写好之后一打开网页就正确，但是一刷新，就叠在一起，我现在也不知道怎么回事。问老师，老师也不直接回答，而且老师打开我的代码就是正确的老师没点击刷新，就告诉我，我的代码在他那边看是正确的，也相当于没回答我的问题。你现在找到解决的方法了吗？我也把cdn引入，修改成本地引入文件，还是一刷新就乱