瀑布流布局——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();
}
});
}