同位素重叠图像不起作用

Question

希望社区能提供帮助。我大致知道需要做什么，除了我不知道如何阅读代码。我在下面添加的内容向您展示了有效的过滤器代码，其中包含我在 imagesLoaded 上研究过的两个不同选项。除了当我取消注释片段时它修复了堆叠但随后根本无法过滤。请给我一些建议。

<script type="text/javascript">

$( function() {

 // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows'
  });

//method 1 to stop stacking
// var $container = $('.isotope').imagesLoaded( function() {
//   $container.isotope({
//      itemSelector: '.element-item',
//     layoutMode: 'fitRows'
//   });
// });



  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    $container.isotope({ filter: filterValue });
  });


  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

//method 2 to stop stacking
// layout Isotope again after all images have loaded
// $container.imagesLoaded( function() {
//   $container.isotope('layout');
// });



});

</script>

Answer 1

Imagesloaded 不像 v1.5 那样包含在 isotope v2 中，因此您需要确保它是单独加载的。下载它 here 并包含在您的页面上。然后使用这个设置：

var $container = $('.isotope');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector: '.element-item',
 layoutMode: 'fitRows'
});
});

同位素重叠图像不起作用

isotope overlapping images not working

jquery

jquery-isotope