DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery瀑布流插件Wookmark使用實例
jQuery瀑布流插件Wookmark使用實例
編輯:JavaScript綜合知識     

 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); });
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved