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结构:
瀑布流案例原始