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

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