瀑布流函数

(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();