jQuery瀑布流插件Wookmark使用實例

 Wookmark jQuery插件大致使用position:absolute來重構內容實現瀑布流布局,需要的朋友可以參考下

插件下載：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); });