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不包含在同位素v2中，因为它与v1.5一样，因此您需要确保单独加载。下载here并将其添加到您的页面上。然后使用此设置：

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

同位素重叠图像不起作用

1 个答案: