瀑布流布局

function waterfall(){

    //获取父盒子
    var $box = this;
    //获取子盒子
    var $items = $box.children();
    //获取父盒子宽度
    var boxWidth = $box.width();
    //子盒子宽度
    var itemWidth = $items.width();
    //设置5列
    var columns = 5;
    //每列间隔宽度
    var space = (boxWidth - itemWidth * columns) / (columns - 1);

    // 新建数组,存储每一列的高度
    var arr = [0,0,0,0,0];

    //遍历子盒子,将子盒子放在上一行高度最小的子盒子下面;
    $items.each(function(index,value){

        //假设最小高和其下标
        var min = arr[0];
        var minIndex = 0;
        //遍历数组,验证
        arr.forEach(function(value,index){
            if(value < min){
                min = value;
                minIndex = index;
            }
        });

        //设置子盒子的left top
        $(value).css({ 
            left : (itemWidth + space) * minIndex , 
            top : min + space
        });

        //将子盒子高度重新存入数组
        arr[minIndex]= min + space + $(value).height();

    });

    // 获取数组中最大的高度,赋值给父盒子的高度
    var maxHeight = Math.max.apply(null,arr);
    $box.height(maxHeight);
}