瀑布流布局——jquery

时间:2021-08-27 18:34:06

瀑布流布局——jquery

首先确定定位,因为.box的宽度是确定的,根据屏幕的宽度来调整.box的列数,所以#content的宽度是随着.box的列数变化而变化的,并且需要保持相对于body居中。

因此需要给#content添加定位position: relative;

而.box的定位第一行relative没问题,除了第一行,其他行都是需要调整其top和left,使他们补齐和对其,因此其他行的定位需要absolute。

因此.box不需要设定position,后期动态为第二行以上的添加absolute。

.box之间的位移选择使用padding,因为这容易计算实际宽度和高度,后面需要用到。

function waterfall(){
//先计算单个box的宽度,再计算当前窗口可以放下几列box
var boxwidth=$(".box").outerWidth();
var boxcol=Math.floor($("body").width()/boxwidth);
//调整#content的宽度,使其与box的总宽度匹配,并相对窗口居中
$("#content").width(boxcol*boxwidth).css("margin","0 auto");
//初始一个数组,用于存放每一列box的总高度
var arr=[];
//对所有box进行遍历,执行box的定位工作
$(".box").each(function(i,a){
//第一行无需定位,只需要得到初始高度值
if(i<boxcol){
arr[i]=$(this).outerHeight();
}
//第二行以上需要为每一个box定位,定位规则是前一行的总高度最小的box列优先排放
else{
//找到所有列的总高度的最小值
var minHeight=Math.min.apply(null,arr);
//找到最小高度列的索引值
var minIndex=$.inArray(minHeight,arr);
//对当前遍历对象执行绝对定位,top为最小高度列的值,left为最小高度列当前的left
$(this).css({
'position':'absolute',
'top':minHeight+'px',
'left':minIndex*boxwidth+'px'
});
//重置最小高度列的值,需加上当前遍历对象的高度
arr[minIndex]+=$(this).outerHeight();
}
});
}