仿照着做了一下，但是为什么会是这样的效果？-慕课网

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

仿照着做了一下，但是为什么会是这样的效果？

来源：3-1 jQuery实现瀑布流布局图片定位

冥冥之中跟你走

2015-10-18 19:52

<!Doctype>

<html>

<head>

<title>瀑布流布局</title>

$(window).on("load",function(){

waterfall();

});

function waterfall(){

var $box=$('#main>div');

var $boxW=$box.eq(0).outerWidth();

var num=Math.floor($(window).width()/$boxW);

$('#main').width($boxW*num).css('margin','0 auto');

var boxHArr=[];

$box.each(function( index, value){

var boxH=$box.eq(index).outerHeight();

if(index<num){

boxHArr[index]=boxH;

}else{

var minH=Math.min.apply(null,boxHArr);

var minIndex=$.inArray(minH,boxHArr);

$(value).css({

'positon':'absolute',

'top':minH+'px',

'left':minIndex*$boxW+'px'

});

boxHArr[minIndex]+=$box.eq(index).outerHeight();

}

});

}

</script>

margin: 0;

padding: 0;

}

#main{

padding-top:10px;

position:relative;

}

.box{

padding:15px 0 0 15px;

float: left;

}

.pic{

padding: 10px;

box-shadow: 0 0 6px #ccc;

border: 1px solid #ccc;

border-radius: 5px;

}

.pic img{

width: 162px;

height: auto;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

写回答关注

3回答

echoczy

2015-12-22 18:40:41

代码打错了 'position':'absolute',

0 0
精慕门7885877

2015-11-14 14:14:42

要对cols计算啊

0 0
Bang丶

2015-11-01 05:10:49

看下控制台报错信息是什么

0 0

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题

按照老实步骤跟着做，但是结果怎么会这样

回答 7

为什么我做的和老师做出的效果不一样

回答 2

为什么照着视频写的 jQuery 会出现这种情况

回答 2

为什么一加js,css样式的效果就没了

回答 3

只有第一第二行有效果，第三行没有效果是因为什么

回答 1

打开慕课网App查看更多内容