基于jquery的插件fn相当于prototype,下面开始封装。
$.fn.waterFall=function (option) { //option 用户传过来的{gap:15}
var defaults = {gap:20} //默认值
defaults = $.extend(defaults,option); //如果用户传参数,以用户为准合并
var _this = $(this); //_this就是最父级,装载图片和文字的盒子
var allItem = _this.children('.item'); //获取父级下每一个的 元素
var itemWidth = allItem.width(); //获取每一个item的宽度
var count = Math.floor(_this.width()/(itemWidth+defaults.gap)); //向下取整,算出每一行最多可放的列数
var arr = []; //创建一个空数组,方便存储每一列的高度
allItem.each(function (index,ele) { //遍历每一个item
if(index<count){ //如果不够占满一列
$(ele).css({ //遍历所有的元素 给每一图片设置坐标值
top:0,
left:(itemWidth+defaults.gap)*index+'px' //所有元素的left坐标 left= (item的宽度+defaults.gap)* index (列数-1)
})
arr[index] = $(ele).height()
}else { //如果有多行
// 第二行以下 添加的规律:找出高度最小的列,往这个后面追加图片
var minHeight = arr[0]; //最小值
var minkey = 0; //记录最小的高度所在的列数
var i =0,l=arr.length;
for(;i<l;i++){
if(minHeight>arr[i]){
minHeight=arr[i];
minkey = i
}
}
var height = $(ele).height()
$(ele).css({
'top':minHeight+defaults.gap+'px',
'left':minkey*(itemWidth+defaults.gap)+'px' //从第二行开始最小的高度
})
//动态更新最小列的高度
arr[minkey]+=height+defaults.gap
}
})
//算出所有列的高度,给外层父元素加上。
var maxHeight = arr[0];
for(var i =0;i<arr.length;i++){
if(maxHeight<arr[i]){
maxHeight=arr[i]
}
}
_this.height(maxHeight)
}
下面调用演示:
dom模板:
<div class="wrapper">
<div class="items">
<!-- 此处请多个item -->
<div class="item">
<img src="./images/1.jpg" alt="">
<p>花非花,雾非雾,夜半来,天明去,来如春梦不多时。</p>
</div>
</div>
</div>
js部分:
$('.items').waterFall({gap:15});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。