jquery实现超简单的瀑布流布局【推荐】

1.看看效果吧！

2.html代码index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style ul { position : relative；padd : 0-3px；列表样式：无；宽度： 600像素；余量： 0 auto }李{宽度： 33.33%;绝对位置：盒子尺寸：边框盒子；显示器：块；} img { width : 100%；高度：自动显示器：块；}/样式脚本src='http:/jquery-1。12 .4 .量滴js '/script/head body style=' background : # 000 ' ul class=' FlowLayout-box ' Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u17。png ' alt=' '/Li Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u19。png ' alt=' '/Li Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u114。png ' alt=' '/Li Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u116。png ' alt=' '/Li Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u118。png ' alt=' '/Li Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u120。png ' alt=' '/Li Li class=' FlowLayout-item ' img class=' FlowLayout-pic ' src=' http :/img/u 132。png ' alt=' '/Li/ul/body/html 3 .插件代码

（函数($) { $.fn.flowLayout=函数（选项){ var dft={ gapWidth:16，//间隙间隙高度：16,//间歇column:3 //列};var ops=$ .扩展(dft，选项);var _ this=$(this)；_this.width((_this.parents(' ."流程布局-方框")。宽度()-2 * ops。GapWidth)/3)var _ pWidth=_ this。父母."流程布局-方框")。宽度();$('."流程布局-方框")。css({ '不透明度' :0 });var columnHeight=[]，列索引=0；for(var I=0；iops.columnI列高。push(0)；} setTimeout(函数(){ for(var j=0；j _ this.lengthj){控制台。log(列高[列索引])；$(_this).等式(j)1 .CSS({ ' top ' :列高[列索引]ops。间隙高度' px '，' left ' : _ pWidth *列索引/3 ' px ' })列高度[列索引]=$(_ this).等式(j)1 .高度()操作。GapHeight列索引=GetIndex()；} },50)函数getIndex(){ var columndex=0，MaxHeight=0；for(var I=0；I column height . lengthi){ if(column height[I]column height[column index]){ column index=I；} if(列高[I]MaxHeight){ MaxHeight=列高[I]} } $(' ."流程布局-方框")。css({ '不透明度' :1,'高度：最大高度})；返回专栏索引；} } })(jQuery)；4.调用代码

$(function () { $(').流程布局-方框李' .流布局({ })；})代码简单，容易修改，拿去用吧。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！