jquery - 使用同位素过滤列出标签

Question

我想用同位素过滤器过滤我的画廊。我正在使用 Lightgallery 展示我的作品，我需要用同位素进行分类。它没有过滤或我做错了。我已使用列表标签将灯光画廊图像显示为我的作品集。列表标签下没有同位素参考。我不是 jQuery 方面的专家，所以我需要一些专家的建议。

这是我的Codepen和调用 isotope 的 jQuery

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

Answer 1

不幸的是，fitRows 没有任何像 columnWidth 这样的度量标准，它可以用于居中（根据 Desandro 的说法），所以它不是可以轻松居中而无需单独编写一些代码来执行此操作的布局。您需要使用像砌体这样的布局来使项目居中。以下代码显示了它是如何工作的，我为您的过滤添加了一个修复程序。与此问题无关，但您可能希望在调用 isotope 之前使用 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 });
  });