Question

我在这个网站上使用Isotope过滤和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 });
});

});

我错过了什么吗？

谢谢，Jared

Answer 1

Masonry和Isotope是单独的脚本，不能一起使用。同位素有一个“砌体”布局，它不是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的第一个过滤器不是动画

1 个答案: