JavaScript window resize加载未触发：移动端网格布局溢出求助

没问题，我来帮你搞定这个布局适配的问题！针对你遇到的移动端元素溢出窗口的情况，我们可以通过检测屏幕尺寸断点，在窄屏时自动切换为垂直排列布局，同时优化原有的resize逻辑。

核心思路 #

1. 定义一个移动端断点（比如常见的768px，可按需调整），当屏幕宽度小于这个值时，直接采用单列垂直布局
2. 封装布局调整逻辑，确保页面初始化和窗口 resize 时都能触发正确的布局
3. 配合CSS确保元素尺寸计算准确，避免溢出

修改后的完整代码 #

JavaScript 部分

我们把原有的resize逻辑重构为可复用的函数，加入断点判断：

$(document).ready(function() {
  // 页面加载完成后先执行一次布局调整
  adjustGridLayout();
  
  // 监听窗口尺寸变化
  $(window).resize(function(){
    adjustGridLayout();
  });
  
  // 封装布局调整函数
  function adjustGridLayout() {
    const margin = 40;
    const padding = 15;
    const itemWidth = 300;
    const windowWidth = $(window).width();
    const mobileBreakpoint = 768; // 移动端断点，可根据需求修改
    let columns = 0;
    let overflow = false;

    // 窄屏/移动端模式：强制单列垂直排列
    if (windowWidth < mobileBreakpoint) {
      $('#grid').css({
        width: '100%',
        padding: `0 ${padding}px`
      });
      // 让网格内的子元素占满宽度
      $('#grid .item').css({
        width: '100%',
        boxSizing: 'border-box'
      });
      return;
    }

    // 宽屏模式：沿用原有的多列计算逻辑
    while(!overflow){
      columns++;
      const totalWidth = (itemWidth * columns) + ((columns + 1) * padding) + margin;
      if(totalWidth > windowWidth) overflow = true;
    }
    if(columns > 1) columns--;
    
    const gridWidth = (itemWidth * columns) + ((columns + 1) * padding) + margin;
    if(gridWidth !== $('#grid').width()){
      $('#grid').width(gridWidth);
      // 恢复子元素固定宽度
      $('#grid .item').css('width', `${itemWidth}px`);
    }
  }
});

CSS 补充

为了确保布局更稳定，添加以下CSS样式（如果你的子元素类名不是.item，请替换为实际类名）：

/* 基础样式：确保元素尺寸计算正确 */
#grid .item {
  box-sizing: border-box; /* 让padding不额外增加元素宽度 */
  margin-bottom: 20px; /* 垂直排列时的上下间距 */
}

/* 媒体查询作为 fallback，即使JS未生效也能保证布局正常 */
@media (max-width: 767px) {
  #grid {
    width: 100% !important;
    padding: 0 15px !important;
  }
  #grid .item {
    width: 100% !important;
  }
}

关键优化点说明 #

• 初始化执行：页面加载时就调用布局函数，避免窄屏加载时先显示错误布局再调整
• 断点判断：通过mobileBreakpoint明确区分移动端和桌面端布局，逻辑更清晰
• box-sizing：解决元素padding导致的宽度溢出问题
• 双保险：同时使用JS动态调整和CSS媒体查询，确保布局在各种场景下都能正常工作

你可以根据自己的设计需求调整mobileBreakpoint的值（比如改成640px适配小屏手机），并替换代码中的元素类名以匹配你的实际HTML结构。

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