jQuery Wookmark Load 瀑布流佈局實例演示

瀑布流佈局非常適合大量圖片的展示，一改過去裁剪圖片尺寸統一的排版，每張圖片都能完全展示，並錯落有致，讓人眼前一亮。

• 版本：
• jQuery v1.4.3+
• jQuery Wookmark Load v1.4.8
• 註意事項：

• 項目中的 img 元素的 width 和 height 屬性需要寫，否則定位會不准確。（可以用 JavaScript 實時獲取圖片的寬高，但圖片數量過多時，這將是一件不靠譜的事情。)

• github

線上實例

實例預覽 Example 基本示例

實例預覽 AMD 載入器

實例預覽 Endless scroll 無限滾動

實例預覽 Flexible width 彈性佈局

實例預覽 Lightbox 支持燈窗插件

實例預覽 Load it all 動態讀取圖片尺寸

實例預覽 Placeholders 底部占位符

實例預覽 PHP server PHP 載入數據

實例預覽 Remote API 遠程 API 載入數據

實例預覽 Filtering Or 篩選功能

實例預覽 Filtering And 篩選功能

實例預覽 Filtering Only 篩選功能

實例預覽 Filtering Fade 篩選功能

實例預覽 sorting排序基本示例

實例預覽 stamping基本示例

使用方法

載入 JavaScript 文件

1. <script src="jquery.js"></script> 
2. <script src="jquery.wookmark.js"></script>

CSS 樣式

1. /* 
2.  * 父容器需要設置相對定位 
3.  * 項目需要設置隱藏 
4.  */ 
5. #list{position:relative;} 
6. #list li{display:none;} 

DOM 結構

1. <!-- 
2. 本例中，$("#list") 就是父容器，內部的 li 就是要進行瀑布流佈局的項目。當然也可以使用 div 或其他標簽的來寫。 
3. 項目中的 img 元素的 width 和 height 屬性需要寫，否則定位會不准確。 
4. --> 
5. <ul id="list"> 
6.   <li><img src="pic_1.jpg" width="200" height="283"><p>text</p></li> 
7.   <li><img src="pic_2.jpg" width="200" height="300"><p>text</p></li> 
8.   ... 
9.   <li><img src="pic_n.jpg" width="200" height="252"><p>text</p></li> 
10. </ul> 

調用 Wookmark

1. $('#list li').wookmark(); 
2.  
3. // 自定義參數調用 
4. $('#list li').wookmark({ 
5.   container: $('#list'), 
6.   offset: 10, 
7.   itemWidth: 200 
8. }); 

手動觸發佈局事件

1. // 根據需要，可以進行手動觸發重新佈局 
2. $('#list').trigger('refreshWookmark');

參數說明