如何在页面加载及窗口resize时调用函数实现同class div等高

问题根源分析 #

• 页面加载时不生效：大概率是你的自执行函数在DOM未完全渲染完成时就运行了，此时目标div还没被正确加载，无法获取到元素或元素的实际高度。
• resize仅首次生效：通常是因为函数内部没有先重置元素的高度为auto，导致后续resize时用的是之前设置的固定高度，无法计算出当前布局下的真实最大高度；也可能是事件监听的写法存在问题，比如错误使用了一次性事件绑定。

完整实现代码 #

1. 核心等高计算函数 #

function matchHeight(className) {
  // 获取所有目标元素
  const elements = document.querySelectorAll(`.${className}`);
  if (!elements.length) return;

  // 先重置所有元素高度，避免旧高度干扰新计算
  elements.forEach(el => {
    el.style.height = 'auto';
  });

  // 计算当前所有元素的最大高度
  let maxHeight = 0;
  elements.forEach(el => {
    const currentHeight = el.offsetHeight;
    if (currentHeight > maxHeight) {
      maxHeight = currentHeight;
    }
  });

  // 给所有元素设置最大高度
  elements.forEach(el => {
    el.style.height = `${maxHeight}px`;
  });
}

2. 页面加载时触发 #

使用DOMContentLoaded事件确保DOM完全就绪后再执行：

document.addEventListener('DOMContentLoaded', () => {
  // 替换成你需要匹配高度的class名称
  matchHeight('equal-height-divs');
});

3. 窗口resize时触发（带防抖优化） #

resize事件会频繁触发，添加防抖可以避免频繁计算影响性能：

// 防抖工具函数：延迟执行，避免高频触发
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 绑定resize事件，每次窗口尺寸变化时重新计算高度
window.addEventListener('resize', debounce(() => {
  matchHeight('equal-height-divs');
}));

关键注意点 #

• 替换代码中的equal-height-divs为你实际使用的class名称。
• 如果你的内容是动态加载的（比如AJAX请求后添加的元素），需要在动态内容加载完成后手动调用一次matchHeight函数。

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