时间戳

首页 > 解决方案 > 过滤同位素网格后重新应用 jquery-match-height

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

问题描述

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

但是，当我过滤 grid时， matchheight 脚本不再处理 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();
}

我根本无法获得“重新开火”的匹配高度

标签： jqueryjquery-isotope

解决方案

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

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

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

推荐阅读