Question

我想用同位素过滤器过滤我的画廊。我使用Lightgallery来展示我的作品，我需要用同位素进行分类。它没有过滤或我做错了。我已经使用list标签将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 });
  });

使用同位素过滤列出标记

1 个答案: