纯JS实现瀑布流照片墙的核心算法解析

瀑布流布局（Masonry Layout）的核心目标是在宽度固定、高度不规则的多列卡片排列中，消除垂直方向上的空白断层，使每一列错落贴合且自适应排列。使用纯 JavaScript 实现瀑布流的核心算法并不复杂：建立一个记录各列当前累计高度的数组，遍历卡片时动态查找出当前高度最小的一列，将新卡片通过绝对定位放入该列下方，随后累加更新该列高度，直到所有卡片排版完毕并撑开外层容器高度。本文将系统拆解该算法的数学逻辑、坐标定位公式、纯 JS 完整实现以及处理图片异步加载、窗口缩放重排等工程实战细节。

一、瀑布流的核心诉求与常见布局误区辨析

在动手编写代码之前，我们需要准确理解瀑布流照片墙要解决的核心问题：维持等宽不等高卡片在时序（或自然流顺序）上的自然填充，消除纵向断层。很多开发者在初次实现时容易选择纯 CSS 方案，但这些方案在严格的内容展示场景中存在显著缺陷：

• CSS 多列布局（column-count）的顺序错位：column-count 虽然能原生实现不等高元素折叠，但其排版规则是“先排满第一列，再从顶部排第二列”。如果有 10 张按时间发布的照片，第 1 到 4 张会全在左边，第 5 到 7 张在中间，破坏了读者从左到右、自上而下的自然阅读时序。
• CSS Flexbox 的纵向空白断层：Flexbox 按行排列时，每一行的高度会被最高的那个卡片撑开，导致同一行中高度较矮的卡片下方出现大片垂直空白，无法形成紧凑的错落效果。
• CSS 原生 Grid Masonry 兼容性受限：虽然 CSS Grid 规范中提出了 grid-template-rows: masonry，但目前主流浏览器尚未完全普及并稳定支持。

因此，对于需要严格保持阅读顺序、动态加载新数据并跨浏览器兼容的照片墙，使用纯 JavaScript 进行绝对定位计算是最可靠的通用方案。

二、核心算法推导：列高数组与贪心定位

纯 JS 瀑布流的本质是一个贪心选择策略（Greedy Strategy）：每一个待排版的卡片，都在当前所有列中挑选累计高度最低的一列进行放置。整个算法可以严格拆分为五个推导步骤：

1. 计算总列数（Columns）

首先获取容器的总可用宽度 containerWidth，设定固定的卡片宽度 itemWidth 和水平间距 gap。可容纳的列数公式为：

columns = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)))

例如，若容器宽度为 800px，卡片宽度为 240px，间距为 16px，则 (800 + 16) / (240 + 16) = 816 / 256 = 3.1875，向下取整后得到总列数为 3 列。

2. 初始化列高数组（Column Heights Array）

构建一个长度等于列数的数组 colHeights，初始值全部填入 0：

const colHeights = new Array(columns).fill(0);

数组中的每个下标对应一列，数值表示该列当前最底部的垂直像素坐标。

3. 查找当前最低列索引

对每一个子卡片执行排版时，通过 Math.min(...colHeights) 获取当前数组中的最小值 minHeight，随后通过 colHeights.indexOf(minHeight) 找到对应的列索引 minIndex。如果有多个列高度相同，indexOf 会自动优先选取最左侧的一列，符合从左到右填充的习惯。

4. 计算绝对定位坐标并更新列高

确定了卡片归属的列索引 minIndex 之后，便可直接推导该卡片相对于父容器的 left 和 top：

• 水平坐标 left：minIndex * (itemWidth + gap)
• 垂直坐标 top：colHeights[minIndex]

将这两个数值赋给卡片的 style.left 与 style.top 后，该卡片的高度（包含其下方的间距 gap）即成为该列的新增高度，因此需要立即原地累加：

colHeights[minIndex] += item.offsetHeight + gap;

5. 撑开父容器高度防止布局塌陷

由于所有子卡片都脱离了正常文档流（position: absolute），如果不显式设置父容器的高度，父容器的高度将变成 0，导致其下方的页脚或相关元素发生重叠。因此，遍历所有卡片后，必须找出最终各列中的最大高度并赋给容器：

container.style.height = `${Math.max(...colHeights)}px`;

三、几何坐标推导与列高数组状态演进

为了直观展现数组变化与 DOM 渲染的关系，我们设想一个包含 3 列的场景：每列宽度固定为 200px，间距为 16px。当第 1、2、3 张卡片放入后，各列初始高度分别为 [220, 160, 240]。此时新到来的第 4 张卡片（高度 140px）将如何定位？

算法执行流程如下：

1. Math.min(220, 160, 240) 返回 160，对应最小列索引 minIndex = 1。
2. 卡片 4 的水平位置：left = 1 * (200 + 16) = 216px。
3. 卡片 4 的垂直位置：top = colHeights[1] = 160px。
4. 列高数组就地更新：colHeights[1] = 160 + 140 + 16 = 316px。
5. 更新后的数组变为 [220, 316, 240]。后续再有新卡片进入时，最小高度列将动态切换为第 0 列（220px）。

四、完整可运行代码实现（HTML + CSS + Pure JS）

以下是经过精简与性能优化的完整瀑布流实现代码。读者可以将代码保存为单个 .html 文件在浏览器中直接打开预览：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>纯 JS 瀑布流照片墙演示</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background-color: #F7F4ED; padding: 20px; font-family: sans-serif; }
    
    /* 容器必须设置相对定位，作为所有子项绝对定位的坐标参考点 */
    #waterfall-container {
      position: relative;
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
      transition: height 0.2s ease;
    }
    
    /* 卡片宽度固定，开启绝对定位并添加过渡平滑效果 */
    .waterfall-item {
      position: absolute;
      width: 240px;
      background: #FFFFFF;
      border: 1px solid #DCD8CF;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(70, 75, 72, 0.08);
      transition: left 0.3s ease, top 0.3s ease;
    }

    .waterfall-item img {
      width: 100%;
      display: block;
    }

    .waterfall-item .desc {
      padding: 10px 12px;
      font-size: 13px;
      color: #464B48;
    }
  </style>
</head>
<body>

  <div id="waterfall-container">
    <!-- 此处卡片由脚本动态生成，或服务端直接渲染 -->
  </div>

  <script>
    class MasonryWaterfall {
      constructor(container, options = {}) {
        this.container = typeof container === 'string' ? document.querySelector(container) : container;
        this.itemWidth = options.itemWidth || 240;
        this.gap = options.gap !== undefined ? options.gap : 16;
        this.colHeights = [];
        this.columns = 0;
      }

      // 核心算法排版方法
      layout() {
        if (!this.container) return;

        const containerWidth = this.container.offsetWidth;
        // 1. 计算总列数
        this.columns = Math.max(1, Math.floor((containerWidth + this.gap) / (this.itemWidth + this.gap)));
        
        // 2. 初始化列高数组
        this.colHeights = new Array(this.columns).fill(0);

        // 获取当前所有子卡片
        const items = this.container.querySelectorAll('.waterfall-item');

        items.forEach((item) => {
          // 3. 找出当前累计高度最小的列
          const minHeight = Math.min(...this.colHeights);
          const minIndex = this.colHeights.indexOf(minHeight);

          // 4. 计算卡片的绝对定位坐标
          const left = minIndex * (this.itemWidth + this.gap);
          const top = minHeight;

          item.style.left = `${left}px`;
          item.style.top = `${top}px`;

          // 5. 累加更新该列的高度（包含纵向间距）
          this.colHeights[minIndex] += item.offsetHeight + this.gap;
        });

        // 6. 撑开外层父容器的高度，防止底部发生布局塌陷
        this.container.style.height = `${Math.max(...this.colHeights)}px`;
      }
    }

    // 模拟数据并初始化演示
    const container = document.getElementById('waterfall-container');
    const mockHeights = [180, 260, 140, 320, 210, 290, 150, 230, 350, 190, 270, 160];

    // 生成模拟 DOM 节点
    mockHeights.forEach((h, idx) => {
      const item = document.createElement('div');
      item.className = 'waterfall-item';
      item.innerHTML = `
        <div style="height: ${h}px; background-color: #8A9478; opacity: ${0.6 + (idx % 5) * 0.08}; display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: bold;">
          高度 ${h}px
        </div>
        <div class="desc">照片卡片 #${idx + 1}</div>
      `;
      container.appendChild(item);
    });

    // 实例化并执行排版
    const waterfall = new MasonryWaterfall(container, { itemWidth: 240, gap: 16 });
    waterfall.layout();

    // 窗口尺寸改变时加入防抖重排
    let resizeTimer = null;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        waterfall.layout();
      }, 150);
    });
  </script>
</body>
</html>

五、关键工程边界与常见陷阱处理

虽然核心数学逻辑清晰，但在实际生产环境中，由于网络环境、异步资源及交互操作的影响，纯 JS 瀑布流往往会面临以下三个经典陷阱：

六、核心记忆要点与总结

纯 JS 实现瀑布流照片墙的核心优势在于其逻辑直观且具备极高的灵活性与兼容性。掌握该算法的关键记忆链条可以归纳为以下四步：

• 定列数：由容器宽度除以卡片与间隙总宽向下取整得到列数，决定了高度数组的长度。
• 记标尺：以一个一维数组 colHeights 持续记录各列当前的垂直底边。
• 找最小：每来一张卡片，查出 Math.min 所在列，直接映射出 left 和 top。
• 防塌陷：全部排完后以 Math.max 撑开父容器；排版前为图片设置占位宽高比，避免异步加载导致塌陷重叠。

遵循这一模型，无论是搭配原生 JavaScript、Vue、React 还是实现触底加载无限照片墙，都能以最小的代码体积与清晰的执行链路稳定运行。