還沒正式成為網頁設計時就想了解的套件了，當時還對jQuery與js不了解也不會應用，對於瀑布流這東西因為太多站使用也花了點時間找了一些相關的做法與資料，這部份慢慢的整理到這篇文章內。
jQuery Masonry 是鼎鼎大名的 David DeSandro 製作的，瀑布流的好處就是每張圖長寬大小不一時，它會自動幫你縮到你css訂好的寬度，序往下排，不用另外裁切。
Bootstrap + Masonry + imagesLoaded
瀑布流的套件與Bootstrap網格系統整合後，不但讓Bootstrap的網格支援瀑布流排版，同時還能透過Bootstrap內建的網格規則，來控制瀑布流的行列數。
看過了梅問題 Bootstrap+Masonry 瀑布流的套件文章後，另外也指出了圖片載入的問題，找了 imagesLoaded 來控制 Masonry 戴入的時的時間，在圖片完成載入後再執行 Masonry 套件。
See the Pen Bootstrap+Masonry+imagesLoaded by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ /* 瀑布流區塊div */ var $container = $('.masonry'); //當圖片讀取完畢才執行 $container.imagesLoaded(function (){ //選擇瀑布流的區塊名稱 $container.masonry({ itemSelector: '.item' }) }); }); |
Bootstrap + Masonry + imagesLoaded + 分類功能
特別注意 portfolio-filters (分類按鈕動態區塊)，不可以在此區塊在加入其他 Class Name ， jQuery 主要是針對。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | jQuery(window).load(function() { //當圖片讀取完畢才執行 $('.portfolio-masonry').imagesLoaded(function (){ //選擇瀑布流的區塊名稱 $('.portfolio-masonry').masonry({ columnWidth: '.portfolio-box', itemSelector: '.portfolio-box', transitionDuration: '0.5s' }) // 分類按鈕動態 $('.portfolio-filters a').on('click', function(e){ e.preventDefault(); if(!$(this).hasClass('active')) { $('.portfolio-filters a').removeClass('active'); var clicked_filter = $(this).attr('class').replace('filter-', ''); $(this).addClass('active'); // 比較 clicked_filter 是否為 all 字串，如果是執行 clicked_filter 自訂字串執行 if，如果是 all執行 else if(clicked_filter != 'all') { $('.portfolio-box:not(.' + clicked_filter + ')').css('display', 'none'); $('.portfolio-box:not(.' + clicked_filter + ')').removeClass('portfolio-box'); $('.' + clicked_filter).addClass('portfolio-box'); $('.' + clicked_filter).css('display', 'block'); $('.portfolio-masonry').masonry(); } else { $('.portfolio-masonry > div').addClass('portfolio-box'); $('.portfolio-masonry > div').css('display', 'block'); $('.portfolio-masonry').masonry(); } } }); }); // /.imagesLoaded $(window).on('resize', function(){ $('.portfolio-masonry').imagesLoaded(function (){ $('.portfolio-masonry').masonry(); }) }); }); |
程式碼中用到的 JavaScript 方法
e.preventDefault()
事件，防止鏈接打開。
.hasClass(“ClassName”)
方法檢查被選元素是否包含指定的 class
.attr()
attribute (屬性) 為 Class 的返回屬性值。
.replace() – 將返回值的字串
1 | string.replace(regexp, replacement) |
- regexp
您要執行替換操作的正則表達式，如果傳入的是一個字符串，那就會當作普通字符來處理，並且只會執行一次替換操作；如果是正則表達式，並且帶有 global (g) 修飾符，則會替換所有出現的目標字符，否則，將只執行一次替換操作。 - replacement
您要替換成的字符。 - 返回值：執行替換操作後的字符串。
See the Pen Bootstrap+Masonry+imagesLoaded+分類功能 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
Masonry + InfiniteScroll AJAX 無限捲動戴入頁面
可參考 Infinite Scroll 相關頁面 (不過開發的話需要商業許可)
Masonry 加上 InfiniteScroll 官方文件
Masonry + InfiniteScroll DEMO 頁面