jQuery HTML5美女瀑布流布局实现方法

本文实例讲述了jQuery HTML5美女瀑布流布局实现方法。分享给大家供大家参考。具体如下：

这是一款Java脚本语言与HTML5实现美女瀑布流布局，本方法是把图片的路径写在了射流研究…的数组里，不过重点好像不是在这里，而是在图片如何自动排列的问题，你可以运行本实例后，点击"加载瀑布流布局"按钮，即可看到图片的瀑布流排列效果，现在很流行这个，希望您从本代码中能找到一些灵感。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-html5-mn-pb-style-codes/

具体代码如下：

！DOCTYPE HTMLhtmlheadtitle美女瀑布流/title style type=' text/CSS ' * { margin :0；padd :0 }分区。部分{溢出：隐藏} div。平均{ width :225 pxfloat : leftdisplay : inline } div。平均div。内容{ margin 3 33605 px背景： # 666 } div。平均div。内容img { width :205 pxmargin:5px } div。平均div。内容分区。img标题{ margin :0 5px行高：20 px }/样式/标题dydiv class=' section ' div class=' side '/div class=' side '/div class=' side '/div class=' side '/div/div按钮加载瀑布流布局/button/body脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script script type=' text/JavaScript ' var JSON=[{ ' text ' : ' 1 '，' src':'images/1.jpg '，' height':'273'}，{'text':'2 '，' src':'images/2.jpgvar h=无穷大；var getDfor(var I=0；伊琳；i ){ if(oD.eq(i)).高度(h){ h=oD.eq(i).高度();getD=od。情商(一)；} }返回getD} $("按钮")。单击(function(){ for(var I=0；ijson . LengTii){ var str；str=' div class=\ ' content \ str=' img src=' http : JSON[I].src ' height=' json[i].高度alt=\ ' \ '/'；str=' div class=\ ' img caption \ ' ' JSON[I].文本/div '；str='/div '；getSmallDiv($(').节'),$('。一旁'))。追加（字符串);}});/script/html希望本文所述对大家的jQuery程序设计有所帮助。