jQuery .height()窗口resize时不更新 瀑布流网格等高布局问题

你的代码失效核心是两点：

• 高度计算逻辑仅绑定在document.ready事件中，仅会在页面初始DOM加载完成后执行一次，窗口尺寸变化时根本没有触发重算逻辑
• 就算手动绑定了resize事件，计算前没有清除上一次给元素设置的固定高度，每次读取到的都是历史设置的固定值，而非窗口宽度变化后内容自然撑开的真实高度，自然无法得到正确的最大高度值

核心逻辑调整 #

1. 把高度计算逻辑抽为独立公共函数，方便在不同场景下复用
2. 每次计算前必须先将所有网格项的height重置为auto，让元素恢复到内容自然撑开的状态，再读取单倍项的高度计算最大值
3. 给resize事件增加防抖处理，避免窗口拖动过程中事件高频触发导致页面卡顿
4. 分别在DOM加载完成、页面静态资源全部加载完成、窗口尺寸调整结束三个节点触发计算，覆盖所有会导致内容高度变化的场景

修复后完整JS代码 #

// 防抖函数：控制计算逻辑仅在窗口停止调整尺寸后触发，降低性能消耗
function debounce(callback, delay = 150) {
  let timer = null;
  return function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => callback.apply(this, arguments), delay);
  }
}

// 网格等高度计算核心逻辑
function adjustGridHeight() {
  $('.achievements-block').each(function() {
    const $block = $(this);
    // 第一步：清空之前设置的固定高度，恢复元素自然高度
    $block.find('.grid-item.single, .grid-item.double').css('height', 'auto');

    let maxSingleHeight = 0;
    // 第二步：遍历所有单倍网格项，记录最大自然高度
    $block.find('.grid-item.single').each(function() {
      const itemHeight = $(this).height();
      if (itemHeight > maxSingleHeight) maxSingleHeight = itemHeight;
    });

    // 第三步：统一设置高度，双倍项高度为单倍最大值的2倍
    $block.find('.grid-item.single').height(maxSingleHeight);
    $block.find('.grid-item.double').height(maxSingleHeight * 2);
  })
}

// DOM结构加载完成后首次计算
$(document).ready(adjustGridHeight);
// 图片、字体等外部资源加载完成后二次校准，避免资源加载撑高内容导致高度不准
$(window).on('load', adjustGridHeight);
// 窗口尺寸调整结束后重新计算
$(window).on('resize', debounce(adjustGridHeight));

补充说明 #

• 原有CSS和HTML结构不需要做任何修改即可生效
• 如果页面存在异步加载的内容（比如懒加载图片、接口请求后插入的文本/媒体内容），需要在对应内容加载完成后手动调用一次adjustGridHeight()做高度校准
• 防抖的delay参数可以根据需求调整，150ms是兼顾响应速度和性能的常规取值，数值越大调整时的延迟感越强，性能消耗越低

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