JavaScript列高调整仅在页面刷新时生效，求修复方案

嘿，别担心，刚接手陌生代码遇到布局问题太正常了！我帮你分析下这段脚本的问题，以及怎么修复：

问题根源 #

你的脚本在窗口宽度大于991px时给三个列设置了固定高度，但当窗口缩小到991px以下时，只重置了poem的定位，却没有把三个列的固定高度去掉。这就导致当你再次把窗口拉大时，浏览器计算的clientHeight还是之前设置的固定值，而不是列内容的实际高度，自然没法算出正确的最大高度来调整。

修复后的完整代码 #

function adjust_col_heights() {
  // 把重复的DOM查询存成变量，减少重复查找
  const col1 = document.getElementById('col-1');
  const col2 = document.getElementById('col-2');
  const col3 = document.getElementById('col-3');
  const poem = document.getElementById('poem');

  if (window.innerWidth > 991) {
    // 先重置高度，确保获取的是内容自然高度
    col1.style.height = 'auto';
    col2.style.height = 'auto';
    col3.style.height = 'auto';

    const col_1_height = col1.clientHeight;
    const col_2_height = col2.clientHeight;
    const col_3_height = col3.clientHeight;
    console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
    
    const col_max_height = Math.max(col_1_height, col_2_height, col_3_height);
    const css_height = col_max_height + "px";
    
    col1.style.height = css_height;
    col2.style.height = css_height;
    col3.style.height = css_height;
    poem.style.position = "absolute";
  } else {
    // 窄屏状态下重置所有列的高度和poem的定位
    col1.style.height = 'auto';
    col2.style.height = 'auto';
    col3.style.height = 'auto';
    poem.style.position = "relative";
  }
}

adjust_col_heights();
window.onresize = adjust_col_heights;

关键修改点 #

• 宽屏逻辑前先重置高度：这样clientHeight获取的是列内容的真实高度，而不是之前设置的固定值
• 窄屏逻辑里也重置高度：确保窗口缩小后列能回到自适应内容的状态，不会保留固定高度
• 把重复的DOM查询存为变量，减少浏览器重复查找DOM节点的开销

可选优化：添加防抖 #

因为resize事件会在窗口调整过程中频繁触发，可能导致不必要的计算。可以加个防抖函数，让脚本只在窗口调整结束后执行：

// 防抖工具函数
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 用防抖后的函数绑定resize事件
window.onresize = debounce(adjust_col_heights);

这样调整窗口时，脚本只会在你停止拖动窗口100毫秒后执行一次，避免频繁计算，更高效。

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