使用同位素过滤列出标记

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 }); 
    });