如何让shuffle.js在切换过滤器后重新计算网格布局空间？

Shuffle.js 自带专门的方法来触发网格重新布局，无需刷新页面。核心是在过滤器容器的宽度动画完成后，调用 Shuffle 的布局更新方法，具体实现如下：

1. 确保已初始化 Shuffle 实例 #

先确认你已经创建了 Shuffle 实例（未初始化的话参考基础代码）：

// 替换成你的网格容器选择器
const shuffleInstance = new Shuffle(document.querySelector('.grid-container'), {
  // 你的配置项，比如 itemSelector: '.grid-item' 等
});

2. 修改切换按钮的点击事件 #

在宽度动画完成后，调用 Shuffle 的 layout() 方法重新计算布局。修改后的代码：

jQuery("#toggleButton").click(function () {
  var moreFiltersBox = $(".more_filters_box");
  var openSpan = $(".open");
  var closeSpan = $(".closes");
  const isOpening = moreFiltersBox.width() === 0;

  moreFiltersBox.animate(
    { width: isOpening ? "25%" : "0" },
    {
      complete: function() {
        // 动画完成后触发网格重新布局
        shuffleInstance.layout();
      }
    }
  );

  openSpan.toggle(!isOpening);
  closeSpan.toggle(isOpening);
});

关键说明 #

• layout() 是 Shuffle.js 原生方法，用于重新计算网格容器尺寸并重新排列所有项目，完美适配容器宽度变化的场景。
• 必须把方法调用放在动画的 complete 回调中，因为宽度动画是渐进式执行的，立即调用会导致 Shuffle 读取未完成动画的容器宽度，布局依然异常。
• 如果初始化时没有保存实例，可通过网格容器元素的 shuffle 属性获取：

  const shuffleInstance = document.querySelector('.grid-container').shuffle;
  

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