使用同位素過濾列出標記

Question

我想用同位素過濾器過濾我的畫廊。我正在使用Lightgallery展示我的作品，我需要用同位素進行分類。這不是過濾或我做錯了。 我用列表標籤來顯示lightgallery圖像作爲我的投資組合。列表標籤下沒有關於同位素的參考。我不是jQuery專家，所以我需要一些專家建議。

這裏是我的Codepen和jQuery的調用同位素

$('#gallery').isotope({ 
    // options 
    itemSelector: '.galleryitem', 
    layoutMode: 'fitRows' 
}); 

Answer 1

不幸的是，fitRows沒有像columnWidth中的任何指標，它可用於中心（根據Desandro），所以它不是佈局可以輕鬆居中，無需編寫一些代碼單獨執行此操作。 您需要使用砌體等佈局才能使物品居中。以下代碼顯示了這可以如何工作，併爲您的過濾添加了修復程序。與此問題無關，但您希望在調用同位素之前使用imagesloaded.js加載圖像。

$('#gallery').isotope({ 
// options 
itemSelector: '.galleryitem', 
percentPosition: true, 
masonry: { 
fitWidth: true 
    } 
    }); 
$('button').on('click', function() { 
var filterValue = $(this).attr('data-filter'); 
    $('#gallery').isotope({ filter: filterValue }); 
    });