資料來源：
作者網站、github
前端開發倉庫-jQuery Wookmark Load 瀑布流佈局、demo
jQuery之家-仿Pinterest超酷jQuery瀑布流動態網格佈局插件、demo
使用方法
1 2 3 | <link rel="stylesheet" href="css/main.css"> <script src="js/jquery.js"></script> <script src="js/wookmark.js"></script> |
1 2 3 4 5 6 | /* - 父容器需要設置相對定位 - 項目需要設置隱藏 */ #list{position:relative;} #list li{display:none;} |
1 2 3 4 5 6 7 8 9 | <!-- 本例中，$("#list") 就是父容器，內部的 li 就是要進行瀑布流佈局的項目。當然也可以使用 div 或其他標籤的來寫。項目中的 img 元素的 width 和 height 屬性需要寫，否則定位會不準確。 --> <ul id="list"> <li><img src="pic_1.jpg" width="200" height="283"><p>text</p></li> <li><img src="pic_2.jpg" width="200" height="300"><p>text</p></li> ... <li><img src="pic_n.jpg" width="200" height="252"><p>text</p></li> </ul> |
如果圖片的行內式不寫 width="" 與 height=""的值而要自適應效果的話，圖片要使用 imagesLoaded 讀完在載入 Wookmark 等效果，讓js可以知道圖片比例高度後就不會發先疊圖的情形了。
1 2 3 4 5 6 7 8 | $('#list li').wookmark(); // 自定義參數調用 $('#list li').wookmark({ container: $('#list'), offset: 10, itemWidth: 200 }); |
1 2 | // 根據需要，可以進行手動觸發重新佈局 $('#list').trigger('refreshWookmark'); |
調用插件
1 | var wookmark = new Wookmark('#myElementContainer'[, options ]); |
1 | $('#myElementContainer').wookmark(options); |
myElementContainer是包裹圖片列表的容器。
配置參數
| 名稱 | 預設值 | 說明 |
|---|---|---|
| container | $(‘body’) or window | 父容器。自定義時需要給父容器設置 CSS 屬性 “position: relative”。使用該元素的寬度來計算瀑布流網格佈局的列數。 |
| align | ‘center’ | 對齊方向，可設置為：”left”, “right”, “center”。 |
| direction | undefined | 排序方向。可設置為：”left”（從左至右）, “right”（從右至左），若不設置，則判斷 align 為 “right” 時，direction 為 “right”，否則預設為 “left”。 |
| autoResize | false | 是否在瀏覽器窗口大小變化時進行重新佈局。如果設置為 “true”，會在瀏覽器尺寸改變時更新瀑布流佈局。 |
| resizeDelay | 50 | 檢測自動重新佈局的間隔時間 (ms)。更新瀑布流佈局的延遲時間。 |
| itemWidth | 0 | 列表項目的寬度 (px 或 %)。第一個網格的預設寬度，可以是像素值，預設值200；或百分比值，預設值10%。 |
| flexibleWidth | 0 | 列表項目自適應的最大寬度。該項設置時，itemWidth 的值作為列表項目的最小寬度。 |
| offset | 2 | 各個網格項的水平和垂直間距。列表項目的間距 (px)，橫向縱向相同。 |
| verticalOffset | undefined | 列表項目縱向的間距 (px)，與 offset 配合即可分別設置橫向與縱向的間距。 |
| outerOffset | 0 | 外部間距，與父容器頂部的間距。預設值為 0。網格佈局和父元素之間的距離。 |
| ignoreInactiveItems | true | 是否隱藏被過濾的項目。如果設置為 true，無效的項任然是可見的。用於淡入淡出過濾圖片。 |
| fillEmptySpace | false | 是否填充底部佔位符。如果設置為true，會在每一列的底部使用空白的網格來填補，使每一列都底部對齊。佔位符的 class 為 “wookmark-placeholder”。 |
| comparator | null | 自定義排序方法。一個自定義的排序函數。 |
| possibleFilters | [] | |
| onLayoutChanged | undefined | 在網格佈局發生改變時的回調函數。佈局變化時觸發的函數。 |
實際製作
See the Pen Wookmark.js-預設1 by Jimmy_Wu (@Jimmy_Wu) on CodePen.