响应式Packery/Masonry/Isotope可变尺寸网格元素重叠问题排查

• 网格容器写死了1200px固定行内高度，是导致内容溢出覆盖下方区块的核心原因
  Packery是基于绝对定位的布局引擎，初始化后只会给内部子元素分配定位坐标，不会自动根据子元素的排布总高度撑开自身容器。固定死容器高度后，当子元素排布的总高度超过1200px时，超出部分会直接溢出到文档流后续位置，覆盖相邻的DOM模块。
• 自定义高度类的百分比计算基准完全错误，是导致元素互相堆叠的核心原因
  你写的.grid-item--small-height这类样式的百分比高度，计算基准是固定1200px的父容器高度，而非Packery定义的基础栅格单元。同时开启percentPosition: true后，Packery只会基于宽度维度计算列宽比例，不会自动适配你写的基于容器高度的百分比值做占位计算，会导致Packery抓取到的元素占位高度和实际视觉渲染高度不匹配，出现元素互相堆叠。
• 遗漏了grid-sizer的必要配置，导致栅格计算偏差
  你在HTML里加了.grid-sizer空元素，但没有给它设置对应样式，在percentPosition: true的模式下，Packery必须通过grid-sizer元素的尺寸来推算每个基础栅格单元的宽度比例，缺失这个配置会导致列宽计算偏移，进一步加重布局错位。
• 重复初始化Packery导致布局逻辑混乱
  JS代码中先后两次对同一个.grid元素调用Packery初始化，第一次在imagesLoaded回调里，第二次是直接实例化，重复初始化会触发Packery内部多次重算布局，进一步放大错位、重叠的问题。
• 冗余样式干扰布局
  .grid-item上的float: left、.grid的清除浮动伪元素，在Packery将子元素转为绝对定位的逻辑下完全无效，属于无意义的冗余代码，无收益但可能干扰计算逻辑。

• 移除网格容器的固定高度
  删除.grid元素上的行内样式style="height: 1200px;"，让Packery布局完成后自动给容器设置和子元素总高度一致的实际高度，从根源解决溢出覆盖问题。
• 补充grid-sizer的基础样式
  在CSS中添加和基础栅格宽度对齐的sizer样式：

  .grid-sizer {
    width: 16.667%;
  }
  

  保证Packery能准确识别基础列宽，配合percentPosition: true实现响应式宽度计算。
• 修正自定义高度类的计算逻辑
  把所有基于固定容器高度的百分比高度，改成和基础栅格宽度等比例的计算值（保持每个最小栅格块为正方形，实现无空隙精准排布），示例：

  /* 小高度：1倍基础栅格高度，和最小宽度的尺寸匹配为正方形 */
  .grid-item--small-height {
    height: calc(16.667% * 1);
    /* 可根据容器实际的边距、最大宽度限制修正计算值，保证基础块宽高完全相等 */
  }
  /* 双单位高度：2倍基础栅格高度 */
  .grid-item--double-small-height {
    height: calc(16.667% * 2);
  }
  /* 半高：3倍基础栅格高度，和原有比例语义对应 */
  .grid-item--half-height {
    height: calc(16.667% * 3);
  }
  /* 更高尺寸的类按相同倍率调整即可，保持宽高和栅格比例对齐 */
  

• 合并重复初始化逻辑，统一布局触发时机
  删掉重复初始化的代码，修正后的JS逻辑如下：

  $(document).ready(function() {
    let $grid = $('.grid');
    // 初始化Packery，显式绑定sizer作为列宽计算基准
    $grid.packery({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer',
      gutter: 0
    });
    // 图片加载过程中实时重排，避免图片未加载完成时高度计算偏差
    $grid.imagesLoaded().progress(function() {
      $grid.packery('layout');
    });
  });
  

• 清理冗余样式
  移除.grid-item上的float: left属性，移除.grid的清除浮动伪元素样式，避免冗余代码干扰布局计算。

• 同时应用自定义宽度、高度类时，所有元素严格对齐栅格，无互相重叠
• 网格容器高度自动适配子元素总高度，不会溢出覆盖下方内容区块
• 窗口尺寸调整时，栅格宽度自动等比缩放，高度同步按比例调整，全程保持无空隙排布

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