如何实现主DIV内子DIV的紧凑自动排列（瀑布流布局）

Flex布局是一维布局，会优先按行排列元素，当子元素高度不一致时，整行高度会被最高元素撑开，导致矮元素下方出现大量空隙——这是Flex的特性，并不适合瀑布流这种二维流式布局。以下是三种可行的解决方案：

方案1：CSS Grid实现自适应瀑布流 #

CSS Grid是二维布局，可通过grid-auto-flow: dense自动填充空隙，同时支持响应式列宽。

核心代码 #

<div class="masonry-grid">
  <!-- 10个带双P标签的子DIV -->
  <div class="masonry-item">
    <p>文章标题1</p>
    <p>短文本内容</p>
  </div>
  <!-- 重复9个不同高度的子元素 -->
</div>

.masonry-grid {
  display: grid;
  /* 响应式列：最小280px，自动填充剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 16px; /* 元素间距 */
  grid-auto-flow: dense; /* 自动填充空隙 */
}

.masonry-item {
  background: #f0f0f0;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

方案2：CSS Column布局实现瀑布流 #

利用多列布局特性，浏览器会自动按列排列内容，天然适配高度不一致的元素。

核心代码 #

<div class="masonry-column">
  <!-- 10个带双P标签的子DIV -->
  <div class="masonry-item">
    <p>文章标题2</p>
    <p>较长文本内容，用来撑开元素高度...</p>
  </div>
  <!-- 重复9个不同高度的子元素 -->
</div>

.masonry-column {
  column-count: 3; /* 列数，可根据需求调整 */
  column-gap: 16px; /* 列间距 */
  padding: 0 16px;
}

.masonry-item {
  break-inside: avoid; /* 防止元素被拆分到两列 */
  background: #f0f0f0;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px; /* 元素底部间距 */
}

方案3：JavaScript库（Masonry.js）实现精准布局 #

如果需要动态加载元素或更复杂的交互，使用专门的瀑布流库可精确计算元素位置，彻底消除空隙。

核心代码 #

<div class="masonry-js">
  <!-- 10个带双P标签的子DIV -->
  <div class="masonry-item">
    <p>文章标题3</p>
    <p>超长文本内容，用来测试布局效果...</p>
  </div>
  <!-- 重复9个不同高度的子元素 -->
</div>

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
  const masonry = new Masonry('.masonry-js', {
    itemSelector: '.masonry-item',
    columnWidth: '.masonry-item',
    gutter: 16
  });
</script>

.masonry-js {
  margin: 0 auto;
  max-width: 1200px;
}

.masonry-item {
  width: calc(33.333% - 16px); /* 3列布局，减去间距 */
  background: #f0f0f0;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

页面截图示例 #

注：截图展示了元素按列紧密排列，无多余空隙的最终效果

完整项目代码（CSS Grid方案） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流文章布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      padding: 20px;
      font-family: Arial, sans-serif;
      background-color: #f8f8f8;
    }
    .masonry-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      grid-gap: 16px;
      grid-auto-flow: dense;
    }
    .masonry-item {
      background: #fff;
      padding: 16px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .masonry-item p:first-child {
      font-size: 1.1em;
      font-weight: 600;
      margin-bottom: 8px;
      color: #333;
    }
    .masonry-item p:last-child {
      line-height: 1.6;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="masonry-grid">
    <div class="masonry-item">
      <p>文章标题1</p>
      <p>这是一段较短的文章内容，用来测试元素高度。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题2</p>
      <p>这是一段较长的文章内容，用来测试元素高度。这是一段较长的文章内容，用来测试元素高度。这是一段较长的文章内容，用来测试元素高度。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题3</p>
      <p>中等长度的内容，用来测试布局效果。中等长度的内容，用来测试布局效果。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题4</p>
      <p>短内容。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题5</p>
      <p>长内容测试：这是一段非常长的文章内容，用来测试元素高度。这是一段非常长的文章内容，用来测试元素高度。这是一段非常长的文章内容，用来测试元素高度。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题6</p>
      <p>中等长度内容，中等长度内容，中等长度内容，中等长度内容。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题7</p>
      <p>短内容。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题8</p>
      <p>较长内容：这是一段较长的文章内容，用来测试元素高度。这是一段较长的文章内容，用来测试元素高度。这是一段较长的文章内容，用来测试元素高度。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题9</p>
      <p>中等长度内容，中等长度内容。</p>
    </div>
    <div class="masonry-item">
      <p>文章标题10</p>
      <p>最长内容测试：这是一段最长的文章内容，用来测试元素高度。这是一段最长的文章内容，用来测试元素高度。这是一段最长的文章内容，用来测试元素高度。这是一段最长的文章内容，用来测试元素高度。</p>
    </div>
  </div>
</body>
</html>

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