js自定义瀑布流布局插件
瀑布流布局是网页中经常采用的一种布局方式，其布局有如下特点：
瀑布流布局特点：
（1）图文元素按列排放
（2）列宽一致，但高度不等
（3）布局过程中将优先向高度最小的列补充数据
以下是自定义的一个jQuery瀑布流插件：jquery.myWaterfull.js
(function($){
$.fn.extend({
myWaterfull:function(){
varparentWidth=$(this).width();//获取每行的宽度
varchildItems=$(this).children();
varchildWidth=childItems.width();//获取每一列的列宽
varcolumn=5;//定义每行有多少列
//计算并设置列与列之间的间隙
varspace=(parentWidth-column*childWidth)/(column-1);
//声明一个数组，用来存放第一行中每一列的高度
vararrHeight=[];
//对子元素进行排列布局
$.each(childItems,function(index,item){
if(indexarrHeight[i]){
minValue=arrHeight[i];
minIndex=i;
}
}
//对余下的子元素挨个排列布局
$(item).css({
top:minValue+space,
left:minIndex*(childWidth+space)
});
//更新最小列高
arrHeight[minIndex]+=$(item).height()+space;
}
});
//由于这里是利用定位对子元素进行布局，所以要更新父元素的高度
//当然也可以利用浮动对子元素进行布局
varmaxHeight=0;
for(vari=0;i
使用示例：
这里假设一个HTML结构：
瀑布流案例原始