jQuery瀑布流外掛程式Wookmark使用執行個體_jquery

外掛程式下載：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);
});