Jquery瀑布流插件wookmark

瀑布流布局在现在的网页设计里面可谓是相当的流行的，从网页到手机应用，都能见到瀑布流的身影。相比较手机应用来说，感觉网页上的瀑布流布局效果实现简单很多，因为我们有现成的jQuery插件可以用，只要稍微的引用一下，再写那么一两句调用代码，然后就没我们什么事了，瀑布流就这么呈现出来了。玩赚乐推荐的Wookmark这个插件的用法也是相当的简单。
先看下效果图：

1、首先，引入JS。

<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><script</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">type</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"text/<span id="1_nwp" style="width: auto; height: auto; float: none;"><a target=_blank target="_blank" id="1_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=16&is_app=0&jk=3a7436ece0613d36&k=javascript&k0=javascript&kdi0=0&luki=6&n=10&p=baidu&q=72079049_cpr&rb=0&rs=1&seller_id=1&sid=363d61e0ec36743a&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1685536&u=http%3A%2F%2Fwww%2Ebanghui%2Eorg%2F1672%2Ehtml&urlid=0" style="color: rgb(66, 139, 202); text-decoration: none;"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">javascript</span></a></span>"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">src</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"jquery.wookmark.js"</span><span class="tag" style="color: rgb(249, 38, 89);">></script></span></li></ol>

2、布局HTML代码结构。

<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><div</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">id</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"main"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">role</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"main"</span><span class="tag" style="color: rgb(249, 38, 89);">></span></li><li class="L1" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><ul</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">id</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"tiles"</span><span class="tag" style="color: rgb(249, 38, 89);">></span></li><li class="L2" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);"><!-- These are our grid blocks --></span></li><li class="L3" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><li><img</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">width</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"200"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">height</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"283"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">original</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"images/image_1.jpg"</span><span class="tag" style="color: rgb(249, 38, 89);">><p></span><span class="pln" style="color: rgb(102, 217, 239);">1</span><span class="tag" style="color: rgb(249, 38, 89);"></p></li></span></li><li class="L4" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> ......</span></li><li class="L5" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);"><!-- End of grid blocks --></span></li><li class="L6" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"></ul></span></li><li class="L7" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="tag" style="color: rgb(249, 38, 89);"></div></span></li></ol>

3、接下来调用

简单调用

<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#tiles li'</span><span class="pun" style="color: rgb(248, 248, 242);">).</span><span class="pln" style="color: rgb(102, 217, 239);">wookmark</span><span class="pun" style="color: rgb(248, 248, 242);">();</span></li></ol>

带参数调用

<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="kwd" style="color: rgb(249, 38, 89);">function</span><span class="pun" style="color: rgb(248, 248, 242);">()</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="pun" style="color: rgb(248, 248, 242);">{</span><span class="pln" style="color: rgb(102, 217, 239);"> </span></li><li class="L1" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">   $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#tiles li'</span><span class="pun" style="color: rgb(248, 248, 242);">).</span><span class="pln" style="color: rgb(102, 217, 239);">wookmark</span><span class="pun" style="color: rgb(248, 248, 242);">({</span></li><li class="L2" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">     autoResize</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">true</span><span class="pun" style="color: rgb(248, 248, 242);">,</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 当浏览器大小改变时是否自动调整</span></li><li class="L3" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">     container</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#main'</span><span class="pun" style="color: rgb(248, 248, 242);">),</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 父<span id="0_nwp" style="width: auto; height: auto; float: none;"><a target=_blank target="_blank" id="0_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=16&is_app=0&jk=3a7436ece0613d36&k=%C8%DD%C6%F7&k0=%C8%DD%C6%F7&kdi0=0&luki=1&n=10&p=baidu&q=72079049_cpr&rb=0&rs=1&seller_id=1&sid=363d61e0ec36743a&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1685536&u=http%3A%2F%2Fwww%2Ebanghui%2Eorg%2F1672%2Ehtml&urlid=0" style="color: rgb(66, 139, 202); text-decoration: none;"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">容器</span></a></span>，这个要注意的一点是该容器需要有 position: relative 属性。</span></li><li class="L4" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">     offset</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="lit" style="color: rgb(174, 129, 255);">2</span><span class="pun" style="color: rgb(248, 248, 242);">,</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 每个元素之间的距离</span></li><li class="L5" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">     itemWidth</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="lit" style="color: rgb(174, 129, 255);">210</span><span class="pun" style="color: rgb(248, 248, 242);">,</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了</span></li><li class="L6" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">     resizeDelay</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="lit" style="color: rgb(174, 129, 255);">50</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 自动调整延迟时间，一般情况下不需要设置，默认的就好了。</span></li><li class="L7" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">  </span><span class="pun" style="color: rgb(248, 248, 242);">});</span><span class="pln" style="color: rgb(102, 217, 239);"> </span></li><li class="L8" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pun" style="color: rgb(248, 248, 242);">});</span></li></ol>

该插件可以配合ajax来实现动态加载数据，不过新增之后需要重新执行一次。如果是采用

<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="kwd" style="color: rgb(249, 38, 89);">var</span><span class="pln" style="color: rgb(102, 217, 239);"> handler </span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#tiles li'</span><span class="pun" style="color: rgb(248, 248, 242);">);</span></li><li class="L1" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">handler</span><span class="pun" style="color: rgb(248, 248, 242);">.</span><span class="pln" style="color: rgb(102, 217, 239);">wookmark</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="pln" style="color: rgb(102, 217, 239);">options</span><span class="pun" style="color: rgb(248, 248, 242);">);</span></li></ol>

这种方式的在重新绑定前需要执行一下下面的代码，做点清理工作。

<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">handler</span><span class="pun" style="color: rgb(248, 248, 242);">.</span><span class="pln" style="color: rgb(102, 217, 239);">wookmarkClear</span><span class="pun" style="color: rgb(248, 248, 242);">();</span></li></ol>

瀑布流插件官方地址：http://www.wookmark.com/jquery-plugin
瀑布流开源项目地址：https://github.com/GBKS/Wookmark-jQuery

感谢阅读，希望此款插件能在您的前端开发中发挥作用！

制作瀑布流布局的优秀插件

首先简单的向大家推荐几款制作瀑布流的jQuery插件，这些插件能帮助大家轻松的实现类似于pinterest的布局效果：

1.Masonry

Masonry是一个动态的网格布局插件。每个元素水平方向都采用全float布局，但在垂直方向使用绝对定位来控制元素的位置，犹如彻墙一样，能做到见缝插针。

2.Isotope

Isotope是一款实现动态布局的精致jQuery插件，是单独的CSS无法实现的，而且他可以通过jQuery选择器来控制元素的显示与隐藏等。

3.Blockslt

BlocksIt.js是一个创建动态的网格布局的jQuery插件。它将HTML元素转换为“块”,它们的位置布局类似于网格布局的Pinterest一样。

4.Wookmark

Wookmark是一款简单的动态网格布局的jQuery插件。

5.Pinterest Clone Layout

这是一个客隆了Pinterest网站布局的jQuery，方便你快速创建一个类似于pinterest布局效果的站点

6.Flex

Flex是一个流体不对称的动画网格布局插件。它还有一个鼠标悬停时放大的功能。

上面六款都是jQuery插件，主要功能就是可以使用他们来制作大家所说的瀑布流布局，当然你要是认为他们不好，你可以自己动手写一个这样的插件，这点我相信您行的，但有很多不懂js的同学，还是可以用一用，顶个急。下面我们一起来看看哪些方网站在使用瀑布流布局。

谁在使用瀑布流布局？

下面展示的都是瀑布流布局的网站，看起来都很经典，然而看起来很熟悉,因为它们都是从Pinterest克隆出来的。否则,他们中的许多人只是简单的创造性使用动态的网格来展示他们的作品和内容。

1.Pinspire

一个经典的瀑布流布局案例，常常被人拿来客隆。

2.WoXiHuan

3.Huaban

4.Mishang

5.Trippy

6.Chill

7.Sworly

8.Veerle

9.All Womens Talk

10.GentleMint

除了这些案例之外，当然还有更优秀的，只不过我没有发现，如果大家手上还有更好的插件和案例，希望能与我们分享。谢谢大家。

原文地址：http://www.banghui.org/1672.html