基于CSS Grid的可变高度双列瀑布流布局序列保持问题

纯CSS限制说明 #

CSS Grid本身的布局逻辑基于行/列网格体系，若要实现无空白的瀑布流同时严格保持HTML元素的顺序（避免自动填充空位导致的顺序错乱），纯CSS方案无法满足——默认的grid-auto-flow: row会优先填充行内空位，打乱元素视觉顺序；禁用填充（不使用dense）则会出现大量空白，失去瀑布流的紧凑效果。

JS/jQuery实现方案（推荐） #

通过动态计算两列的当前累计高度，将每个元素依次分配到当前高度更低的列中，既实现瀑布流的紧凑排列，又严格遵循HTML的元素顺序。

基础代码示例 #

HTML结构

<div class="grid-container">
  <div class="grid-item">内容1</div>
  <div class="grid-item">内容2（高度更高）</div>
  <div class="grid-item">内容3</div>
  <div class="grid-item">内容4</div>
  <div class="grid-item">内容5（高度较高）</div>
</div>

CSS样式

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem; /* 自定义列间距 */
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

jQuery代码

$(function() {
  // 初始化两列的累计高度
  let columnHeights = [0, 0];
  const $items = $('.grid-item');

  $items.each(function() {
    // 选择当前高度更低的列（Grid列从1开始计数）
    const targetCol = columnHeights[0] <= columnHeights[1] ? 1 : 2;
    $(this).css('grid-column-start', targetCol);
    // 更新对应列的累计高度（包含元素margin）
    columnHeights[targetCol - 1] += $(this).outerHeight(true);
  });
});

纯JS版本（无需jQuery）

document.addEventListener('DOMContentLoaded', () => {
  let columnHeights = [0, 0];
  const items = document.querySelectorAll('.grid-item');

  items.forEach(item => {
    const targetCol = columnHeights[0] <= columnHeights[1] ? 1 : 2;
    item.style.gridColumnStart = targetCol;
    // 计算元素实际占用高度（含margin）
    const style = getComputedStyle(item);
    const itemHeight = item.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom);
    columnHeights[targetCol - 1] += itemHeight;
  });
});

动态加载适配 #

如果页面存在动态新增元素（如AJAX加载），只需在元素插入DOM后重新执行上述JS代码，即可维持瀑布流布局的正确性。

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