jQuery瀑布流插件Wookmark使用實例_jquery

外掛程式下載：https://github.com/GBKS/Wookmark-jQuery
官方首頁：http://www.wookmark.com/jquery-plugin

下載插件後，在網頁中引用插件的JS文件：

複製代碼 代碼如下:

HTML程式碼結構：

複製程式碼 程式碼如下:

 

  
• 

  
• 
    
• 

 

簡單用法：在html檔案中新增程式碼

複製程式碼 程式碼如下:

<script><BR> jQuery(function($ ){<BR>  $('#tiles li').wookmark();<BR> });<BR></script>

複雜一點的用法：

複製程式碼 程式碼如下:

<script><BR>jQuery(function($){<BR> $('#tiles li' ).wookmark({ //這裡是要實現瀑布流佈局的物件<BR>  autoResize: true, //設定成true表示當window視窗大小改變的時候，重新佈局<BR>  container: $('#container' ), //這個是容器名稱這個容器要必須包含一個css屬性"position:relative" 否則你就會看到全部擠在頁面的左上角了<BR>  offset: 12, //2個相鄰元素之間的間距<BR>  itemWidth: 222, //指定物件的寬度<BR>  resizeDelay: 50 //這是延遲效果預設為50<BR> });<BR>});<BR></script>

wookmark同樣也可以配合ajax來實現動態載入數據，不過新增之後需要重新執行一次。

複製程式碼 程式碼如下:

var handler = $('#tiles li');

var handler = $('#tiles li');
handler.wookmark(options);

如果你在前面已經綁定了事件，在重新執行之前，先清除一下。 複製程式碼

程式碼如下:

handler.wookmarkClear();

看到比較多人在問滾動載入是怎麼用的，弄個實例補充說明下：複製程式碼

程式碼如下:

var handler = null;
//定義基本屬性.
var options = {
    autoResize: true,
    container: $('#main'), ,
    itemWidth: 210
};

//定義滾動函數
function onScroll(event) {
    //到底部是否到底部（這裡是離底部還有100p載入資料).
    var closeToBottom = ($(window).scrollTop() $(window).height() > $(document).height() - 100);
   if(closeToBot if(closeToBot) {        //這裡是AJAX載入的資料
        $.ajax({url:"data.html",dataType:"html", su 對象
            $('#waterfall').append(html);
            //清除原來的定位ear();
            //建立新的wookmark對象
            handler = $('#waterfall li');
                  });
    }
};

$ (document).ready(new function() {
    //綁定scroll事件.
    $(document).bind('scroll', onScroll);
  >    handler = $('#waterfall li');
    handler.wookmark(options);
});