同位素网格过滤后重新应用jquery-match-height

时间:2018-09-24 18:49:22

标签: jquery jquery-isotope

我正在使用jquery-match-height来匹配同位素布局的网格项内的内部div的高度,并且当同位素网格加载时,这非常正常。

但是,当我过滤网格时,matchheight脚本不再处理div,每个div都返回其原始高度。

我尝试过:

  $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();
}

我根本无法获得火柴身高来“重新发射”

2 个答案:

答案 0 :(得分:1)

这不是完美的方法,但是您可以尝试以下方法:

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

答案 1 :(得分:0)

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

这里的症结在于,新代码必须在过滤器完成后才运行,并且我应该只匹配可见元素的高度(因为过滤器不会删除项目与过滤器不匹配的代码,只需将其设置为“ 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'); 
});

在回答了来自其他人的数百个问题后,我获得了最好的赏金,被忽略了。要爱它。