基于窗口加载与Resize事件动态启用/禁用JS Masonry网格脚本

嘿，你的思路方向是对的，但目前的实现还有几个细节可以打磨，让功能更稳定高效，比如缺失初始页面加载的判断、resize事件频繁触发的性能问题，以及真正做到「禁用」网格（不是只不执行初始化，还要恢复原布局）。下面给你一套完整的解决方案：

1. 先封装网格的初始化与销毁逻辑 #

把minigrid的初始化和恢复布局的代码拆成独立函数，复用性更强，也方便后续调用：

// 保存网格实例，方便后续销毁
let gridInstance = null;

// 初始化minigrid网格
function initMinigrid() {
  // 这里填入你的minigrid配置，比如容器、子元素、间距等
  gridInstance = minigrid({
    container: '.your-grid-container',
    item: '.your-grid-item',
    gutter: 15
  });
}

// 销毁网格，恢复普通流式布局
function destroyMinigrid() {
  if (!gridInstance) return;
  
  // 清除所有网格项的定位样式，回到默认布局
  document.querySelectorAll('.your-grid-item').forEach(item => {
    item.style.position = '';
    item.style.top = '';
    item.style.left = '';
  });
  
  // 清空实例，标记为未初始化状态
  gridInstance = null;
}

2. 处理窗口响应逻辑（含初始加载） #

接下来写一个统一的处理函数，同时在页面加载时就执行一次，避免初始状态不符合预期：

function handleGridResponsiveness() {
  const currentWidth = window.innerWidth;
  
  if (currentWidth > 800) {
    // 宽度大于800px，且网格未初始化时才执行初始化
    if (!gridInstance) {
      initMinigrid();
    }
  } else {
    // 宽度小于等于800px，且网格已初始化时销毁
    if (gridInstance) {
      destroyMinigrid();
    }
  }
}

// 页面加载完成后立刻执行一次，处理初始宽度
window.addEventListener('load', handleGridResponsiveness);

// 监听窗口resize，添加防抖避免频繁触发（提升性能）
let resizeDebounceTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeDebounceTimer);
  resizeDebounceTimer = setTimeout(handleGridResponsiveness, 200);
});

3. 替换你现有代码的注意事项 #

你现在的代码是把minigrid的源码直接嵌套在resize事件里，这会导致每次窗口变化都重新加载一遍源码，非常低效。建议：

• 把minigrid的源码通过<script>标签引入到页面头部；
• 或者把源码放在一个单独的函数里，确保只执行一次初始化逻辑（比如上面的initMinigrid函数）。

如果必须保留内联的minigrid源码，你可以把它放到initMinigrid里，确保只有在需要初始化时才执行：

function initMinigrid() {
  if (gridInstance) return;
  
  /* @license minigrid v1.6.0 - minimal cascading grid layout http://alves.im/minigrid */ 
  !function(t){"use strict";function e(t,e,n,o,r){var i=Array.prototype.forEach,f... // 你的minigrid完整源码
  
  // 初始化网格并保存实例
  gridInstance = minigrid({
    container: '.your-grid-container',
    item: '.your-grid-item',
    gutter: 15
  });
}

为什么要这么做？ #

• 初始加载判断：避免页面一开始就是移动端宽度，但网格还是被初始化的尴尬情况；
• 防抖处理：resize事件会在窗口拖动时频繁触发，加个200ms的延迟可以减少不必要的计算，提升页面流畅度；
• 真正销毁网格：仅仅不执行初始化不够，必须清除已经设置的定位样式，让布局回到默认的流式排列，才算真正「禁用」。

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