过滤同位素网格后重新应用 jquery-匹配高度

Question

我正在使用 jquery-match-height 来匹配同位素布局网格项内的内部 div 的高度，这在加载同位素网格时效果很好。

然而，当我 过滤网格时 ，div 不再被 matchheight 脚本处理，它们中的每一个 returns原高度.

我试过：

  $grid.on( 'arrangeComplete', function() { 
   console.log("OK, arrangeComplete");
   $.fn.matchHeight._update();
   //$('.card-text').matchHeight(); //Here I tried simply re-initiating... no effect
  });

我也试过：

if (!$grid.data('isotope').filteredItems.length ) {
 $.fn.matchHeight._update();
}

我根本无法将匹配高度设置为 "refire"

Answer 1

这不是一个完美的方法，但你可以试试这个：

setInterval(function(){
  $(function() {
    $('.item').matchHeight(options);
  });
} , 300);

Answer 2

好的，我完全不确定这是最优雅的方法，但它确实有效。

这里的关键是意识到新代码必须运行只有在过滤器完成后，我应该只匹配 可见元素 的高度（由于过滤器不会删除与过滤器不匹配的项目，它只是将它们设置为“display:none”

//Filter complete
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
  //matchheight on the visible items 
  $('.item:visible').matchHeight(); 
  //And re-layout the grid  
  $grid.isotope('layout'); 
});

过滤同位素网格后重新应用 jquery-匹配高度

Reapplying jquery-match-height after isotope grid is filtered

jquery

jquery-isotope