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); });