瀑布流函数

在jQuery对象后面添加瀑布流函数

(function($){
    $.fn.waterFall = function(gap){
            // 函数调用对象 jQuery对象
        var $this = $(this),
            // 调用对象子元素集合 jQuery对象
            $items = $this.children(),
            // 总宽度
            sumWidth = $this.width(),
            // 子元素的宽度
            width = $items.width(),
            // 子元素高度
            height = 0,
            // 两个子元素之间的间距 默认20
            gap = gap || 20,
            // 总列数
            column = Math.floor(sumWidth / (width + gap)),
            // 每列的高度数组集合
            arrHeight = [];

        // 遍历子元素
        $items.each(function(key , val){
            // 获取每个子元素的高度
            height = $(val).height();
            // 第一行
            if(key < column){
                // 把第一行的子元素高度添加到数组中
                arrHeight[key] = height;
                // 第一行 子元素 top = 0  left = 为当前索引*（子元素宽度+两个元素之间的间距）
                $(val).css({
                    'top':0,
                    'left':key * (width + gap)
                });
            // 其他行
            }else {
                // 查找高度 最小值
                // 先给以个默认索引 即 0
                var minIndex = 0;
                var minHeight = arrHeight[minIndex];
                // 遍历高度数组
                for(var i in arrHeight){
                    // 判断最小值
                    if(minHeight > arrHeight[i]){
                        // 替换最小值索引及最小值
                        minIndex = i;
                        minHeight = arrHeight[i];
                    }
                }
                // 其他行  top = 每列中的最小值 即最低的那一列 
                $(val).css({
                    'top':minHeight,
                    'left':minIndex * (width + gap)
                });
                // 修改高度数组  最小高度 = 最小高度 + 当前子元素高度
                arrHeight[minIndex] = minHeight + height;
            }
        });

        // 查找高度 最大值
        var maxIndex = 0,
            maxHeight = arrHeight[maxIndex];
        for(var i in arrHeight){
            if(maxHeight < arrHeight[i]){
                maxIndex = i;
                maxHeight = arrHeight[i];
            }
        }
    }
})(jQuery)
   
// 调用函数 
// $('.items').waterFall();

[相关资料][https://github.com/PaddyWang/study/tree/master/瀑布流效果]