jQuery Isotope 的第一个过滤器没有动画

Question

我在此站点上使用 Masonry 进行同位素过滤：

滤镜工作正常并且在第一个滤镜之后动画效果很好，但我是一个注重细节的人，我无法克服第一个滤镜没有正确动画的事实。

我的 app.js 看起来像这样：

jQuery(document).ready(function($) {

// init Masonry
var $gridMason = $('.grid-mason').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  transitionDuration: '0.8s'
});

// layout Masonry after each image loads
$gridMason.imagesLoaded().progress( function() {
  $gridMason.masonry('layout');
});

// filtering
$('.filter-button-group').on( 'click', 'a', function(e) {
  e.preventDefault();
  var filterValue = $(this).attr('data-filter');
  $gridMason.isotope({ filter: filterValue });
});

});

我是不是漏掉了什么？

谢谢，贾里德

Answer 1

Masonry 和 Isotope 是独立的脚本，不能一起使用。 Isotope 有一个 "masonry" 布局，它不是 masonry.js，它可以过滤和排序，而 masonry.js 不能过滤或排序。您首先使用 masonry.js 初始化您的项目，然后尝试使用 isotope.js 进行过滤，只有在您单击第一个过滤按钮后才会加载。摆脱 masonry.js 并仅使用 isotope.js。

jQuery(document).ready(function($) {

// init Masonry
var $gridMason = $('.grid-mason').isotope({
// options
itemSelector: '.grid-item',
masonry: {
columnWidth: '.grid-sizer'
},
percentPosition: true,
transitionDuration: '0.8s'
});

// layout Masonry after each image loads
$gridMason.imagesLoaded().progress( function() {
$gridMason.isotope('layout');
});

// filtering
$('.filter-button-group').on( 'click', 'a', function(e) {
e.preventDefault();
var filterValue = $(this).attr('data-filter');
$gridMason.isotope({ filter: filterValue });
});

});

jQuery Isotope 的第一个过滤器没有动画

jQuery Isotope's first filter is not animating

jquery-isotope

jquery-masonry