快捷導(dǎo)航

jQuery瀑布流插件Wookmark使用實(shí)例

更新時(shí)間：2014年04月02日 10:55:28 作者：

Wookmark jQuery插件大致使用position:absolute來重構(gòu)內(nèi)容實(shí)現(xiàn)瀑布流布局,需要的朋友可以參考下

插件下載：https://github.com/GBKS/Wookmark-jQuery
官方主頁：http://www.wookmark.com/jquery-plugin

下載插件后，在網(wǎng)頁中引用插件的JS文件：

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.wookmark.min.js"></script>

HTML代碼結(jié)構(gòu)：

復(fù)制代碼代碼如下:

<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文件中添加代碼

復(fù)制代碼代碼如下:

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

復(fù)雜一點(diǎn)的用法：

復(fù)制代碼代碼如下:

<script>
jQuery(function($){
 $('#tiles li').wookmark({ //這里是要實(shí)現(xiàn)瀑布流布局的對象
  autoResize: true, //設(shè)置成true表示當(dāng)window窗口大小改變的時(shí)候，重新布局
  container: $('#container'), //這個(gè)是容器名稱 這個(gè)容器要必須包含一個(gè)css屬性"position:relative" 否則你就會看到全部擠在頁面的左上角了
  offset: 12, //2個(gè)相鄰元素之間的間距
  itemWidth: 222, //指定對象的寬度
  resizeDelay: 50 //這是延時(shí)效果 默認(rèn)是50
 });
});
</script>

wookmark同樣也可以配合ajax來實(shí)現(xiàn)動態(tài)加載數(shù)據(jù)，不過新增之后需要重新執(zhí)行一次。

復(fù)制代碼代碼如下:

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

如果你在前面已經(jīng)綁定了事件，在重新執(zhí)行之前，先清除一下。

復(fù)制代碼代碼如下:

handler.wookmarkClear();

看到比較多人在問滾動加載是怎么用的，弄個(gè)實(shí)例補(bǔ)充說明下：

復(fù)制代碼代碼如下:

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

//定義滾動函數(shù)
function onScroll(event) {
    //是否到底部（這里是判斷離底部還有100px開始載入數(shù)據(jù)）.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom) {
        //這里就是AJAX載入的數(shù)據(jù)
        $.ajax({url:"data.html", dataType:"html", success:function(html){
            //把新數(shù)據(jù)追加到對象中
            $('#waterfall').append(html);
            //清除原來的定位
            if(handler) handler.wookmarkClear();
            //創(chuàng)建新的wookmark對象
            handler = $('#waterfall li');
            handler.wookmark(options);
            }
        });
    }
};

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