function waterfall(){
var $parent=$('#main');
var $box=$('#main>.box');
var $boxWidth=$box.eq(0).outerWidth();
var cols=Math.floor($(window).width()/$boxWidth);
$parent.css({
'width':$boxWidth*cols+'px',
'margin':'0 auto'
});
var arr=[];
$box.each(function(index,element){
var boxHeight=$box.eq(index).outerHeight();
if(index<cols){
arr.push(boxHeight);
}else{
var minH=Math.min.apply(null,arr);
var minHIndex=$.inArray(minH,arr);
console.log(minHIndex);
// 这里打印出来的minHIndex是0,而且刷新会变。
$(element).css({
'position':'absolute',
'top':minH+'px',
'left':$box.eq(minHIndex).position().left+'px'
});
//arr[minHIndex]+=$box.eq(index).outerHeight();
}
});
第二列以后的图片会缩成一团,而且打印出来最小高度的索引是0,一直刷新的话还会变。
arr.push(boxHeight); ???
是不是你把arr[minHIndex]+=$box.eq(index).outerHeight();注释了的原因,不注释它就行了吧