使用Isotope.js过滤时，无内容分区（含标题）的隐藏实现问题

我完全懂你要实现的效果——每个带h2标题的分区里都有独立的Isotope容器，过滤后如果这个分区里连一个可见项都没有，就把整个分区（包括标题）藏起来，只要有项显示就自动把分区再展示出来。其实用Isotope自带的事件就能搞定，大概率是之前的事件监听逻辑没踩对节奏，我给你把步骤理清楚：

核心思路 #

每次Isotope完成过滤排列操作后，逐个检查每个分区：

1. 统计该分区内Isotope容器里过滤后保留的可见项数量
2. 如果数量为0，就隐藏整个分区；反之则显示分区

具体代码实现 #

先假设你的HTML结构是这样的（如果结构不同，只需要调整选择器即可）：

<!-- 示例分区结构 -->
<section class="section-group">
  <h2>产品分类A</h2>
  <div class="isotope-grid">
    <div class="grid-item category-a">商品A1</div>
    <div class="grid-item category-b">商品B1</div>
  </div>
</section>

<section class="section-group">
  <h2>产品分类B</h2>
  <div class="isotope-grid">
    <div class="grid-item category-a">商品A2</div>
    <div class="grid-item category-c">商品C2</div>
  </div>
</section>

<!-- 过滤控制按钮 -->
<button data-filter=".category-a">只看A类</button>
<button data-filter=".category-b">只看B类</button>
<button data-filter="*">显示全部</button>

接下来是JavaScript逻辑，重点在事件监听和状态检查：

// 初始化所有Isotope容器
const isotopeGrids = document.querySelectorAll('.isotope-grid');
isotopeGrids.forEach(grid => {
  new Isotope(grid, {
    itemSelector: '.grid-item',
    layoutMode: 'fitRows' // 根据你的布局需求调整
  });
});

// 定义检查并切换分区显示状态的函数
function checkSectionVisibility() {
  document.querySelectorAll('.section-group').forEach(section => {
    const grid = section.querySelector('.isotope-grid');
    // 获取过滤后保留的项数量（Isotope原生方法，准确可靠）
    const visibleItemCount = grid.isotope('getFilteredItems').length;
    // 根据数量切换分区显示状态
    section.style.display = visibleItemCount > 0 ? 'block' : 'none';
  });
}

// 给过滤按钮绑定点击事件，触发过滤操作
document.querySelectorAll('button[data-filter]').forEach(btn => {
  btn.addEventListener('click', function() {
    const filterVal = this.getAttribute('data-filter');
    isotopeGrids.forEach(grid => {
      grid.isotope({ filter: filterVal });
    });
    // 注意：不要直接在这里调用检查函数，因为Isotope过滤是异步的
  });
});

// 关键：监听Isotope的arrangeComplete事件，排列完成后再检查状态
isotopeGrids.forEach(grid => {
  grid.addEventListener('arrangeComplete', checkSectionVisibility);
});

// 页面加载完成后先执行一次，确保初始状态正确
window.addEventListener('load', checkSectionVisibility);

关键细节提醒 #

• 必须用arrangeComplete事件：Isotope的过滤和排列是异步执行的，直接在按钮点击后调用检查函数会拿到旧的状态，只有事件触发时才是排列完成后的正确状态。
• 用getFilteredItems()方法：这个方法是Isotope提供的原生方法，能准确返回当前过滤后保留的项数组，比自己查DOM元素的可见性更可靠。
• 初始执行一次：页面刚加载时，可能默认过滤条件下就存在空分区，所以页面加载完成后要主动调用一次检查函数，保证初始显示正确。

内容的提问来源于stack exchange，提问作者Marcello