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