插件下載：https://github.com/GBKS/Wookmark-jQuery
官方主頁：http://www.wookmark.com/jquery-plugin
下載插件後，在網頁中引用插件的JS文件：
. 代碼如下:
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.wookmark.min.js"></script>
HTML代碼結構：
. 代碼如下:<div id="main">
<ul id="tiles">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
</div>
簡單用法：在html文件中添加代碼
. 代碼如下:<script>
jQuery(function($){
$('#tiles li').wookmark();
});
</script>
復雜一點的用法：
. 代碼如下:<script>
jQuery(function($){
$('#tiles li').wookmark({ //這裡是要實現瀑布流布局的對象
autoResize: true, //設置成true表示當window窗口大小改變的時候，重新布局
container: $('#container'), //這個是容器名稱 這個容器要必須包含一個css屬性"position:relative" 否則你就會看到全部擠在頁面的左上角了
offset: 12, //2個相鄰元素之間的間距
itemWidth: 222, //指定對象的寬度
resizeDelay: 50 //這是延時效果 默認是50
});
});
</script>
wookmark同樣也可以配合ajax來實現動態加載數據，不過新增之後需要重新執行一次。
. 代碼如下:var handler = $('#tiles li');
handler.wookmark(options);
如果你在前面已經綁定了事件，在重新執行之前，先清除一下。
. 代碼如下:handler.wookmarkClear();
看到比較多人在問滾動加載是怎麼用的，弄個實例補充說明下：
. 代碼如下:var handler = null;
//定義基本屬性.
var options = {
autoResize: true,
container: $('#main'),
offset: 2,
itemWidth: 210
};
//定義滾動函數
function onScroll(event) {
//是否到底部（這裡是判斷離底部還有100px開始載入數據）.
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
if(closeToBottom) {
//這裡就是AJAX載入的數據
$.ajax({url:"data.html", dataType:"html", success:function(html){
//把新數據追加到對象中
$('#waterfall').append(html);
//清除原來的定位
if(handler) handler.wookmarkClear();
//創建新的wookmark對象
handler = $('#waterfall li');
handler.wookmark(options);
}
});
}
};
$(document).ready(new function() {
//綁定scroll事件.
$(document).bind('scroll', onScroll);
//第一次布局.
handler = $('#waterfall li');
handler.wookmark(options);
});