在开发相册集页面时，我需要实现类似小红书的瀑布流布局——每张卡片高度不同，多列排列且各列高度尽可能接近。过程中踩了一些坑，最终总结出两种方案，分享给大家。 ## 什么是瀑布流布局？瀑布流（Masonry Layout）是一种多列布局方式，每个元素按顺序放入最矮的列中，使各列高度尽可能均匀。与普通 Grid 不同，瀑布流中每个元素的高度可以不同，整体呈现参差错落的视觉效果。核心难点：**元素高度未知**（尤其是图片），需要在渲染后才能测量。 --- ## 方案一：客户端 JS 实现（最短列优先算法） ### 思路 1. 先用轮询方式将元素分配到各列，完成首次渲染 2. 等待所有图片加载完成 3. 测量每个元素的实际高度 4. 用「最短列优先」算法重新分配元素 5. 监听窗口 resize 事件，响应式切换列数 ### 完整代码 ```tsx 'use client'; import { Children, ReactNode, useCallback, useEffect, useRef, useState } from 'react'; interface MasonryGridProps { children: ReactNode; mobileColumns?: number; desktopColumns?: number; gap?: number; className?: string; } export default function MasonryGrid({ children, mobileColumns = 2, desktopColumns = 4, gap = 16, className = '', }: MasonryGridProps) { const items = Children.toArray(children); const containerRef = useRef(null); const [colCount, setColCount] = useState(desktopColumns); const [distribution, setDistribution] = useState(null); const redistributeTimerRef = useRef | null>(null); // ① 响应式列数 useEffect(() => { const update = () => { const newCount = window.innerWidth < 768 ? mobileColumns : desktopColumns; setColCount((prev) => { if (prev !== newCount) { setDistribution(null); return newCount; } return prev; }); }; update(); window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); }, [mobileColumns, desktopColumns]); // ② 最短列优先分配算法 const redistribute = useCallback(() => { const container = containerRef.current; if (!container) return; const itemEls = container.querySelectorAll('[data-masonry-item]'); if (itemEls.length === 0) return; // 收集每个 item 的索引与实际高度 const measured: { index: number; height: number }[] = []; itemEls.forEach((el) => { const idx = parseInt(el.getAttribute('data-masonry-item') || '0', 10); measured.push({ index: idx, height: el.getBoundingClientRect().height }); }); measured.sort((a, b) => a.index - b.index); // 核心：每次将元素放入当前最矮的列 const colHeights = new Array(colCount).fill(0); const cols: number[][] = Array.from({ length: colCount }, () => []); measured.forEach(({ index, height }) => { const shortest = colHeights.indexOf(Math.min(...colHeights)); cols[shortest].push(index); colHeights[shortest] += height + gap; }); setDistribution(cols); }, [colCount, gap]); // ③ 防抖调度 const scheduleRedistribute = useCallback(() => { if (redistributeTimerRef.current) clearTimeout(redistributeTimerRef.current); redistributeTimerRef.current = setTimeout(() => { requestAnimationFrame(redistribute); }, 50); }, [redistribute]); // ④ 监听图片加载，全部就绪后重新分配 useEffect(() => { const container = containerRef.current; if (!container) return; const initialTimer = setTimeout(() => { requestAnimationFrame(redistribute); }, 100); const images = container.querySelectorAll('img'); let loadedCount = 0; const totalImages = images.length; if (totalImages === 0) { return () => clearTimeout(initialTimer); } const onImageReady = () => { loadedCount++; if (loadedCount >= totalImages) { scheduleRedistribute(); } }; images.forEach((img) => { if (img.complete && img.naturalHeight > 0) { loadedCount++; } else { img.addEventListener('load', onImageReady); img.addEventListener('error', onImageReady); } }); if (loadedCount >= totalImages) { scheduleRedistribute(); } return () => { clearTimeout(initialTimer); if (redistributeTimerRef.current) clearTimeout(redistributeTimerRef.current); images.forEach((img) => { img.removeEventListener('load', onImageReady); img.removeEventListener('error', onImageReady); }); }; }, [redistribute, scheduleRedistribute, items.length, colCount]); // ⑤ 构建列内容 const buildColumns = (): ReactNode[][] => { const cols: ReactNode[][] = Array.from({ length: colCount }, () => []); if (distribution) { // 优化后的分布 distribution.forEach((itemIndices, colIdx) => { itemIndices.forEach((idx) => { if (idx < items.length) { cols[colIdx].push(

{items[idx]}

); } }); }); } else { // 初始轮询分配（用于首次渲染和测量） items.forEach((item, i) => { cols[i % colCount].push(

{item}

); }); } return cols; }; const columns = buildColumns(); return (

{columns.map((col, i) => (

{col}

))}

); } ``` ### 代码解析 #### ① 响应式列数 ```tsx const newCount = window.innerWidth < 768 ? mobileColumns : desktopColumns; ``` 监听 `resize` 事件，根据屏幕宽度切换列数。列数变化时将 `distribution` 重置为 `null`，触发重新测量。 #### ② 最短列优先算法这是瀑布流的核心逻辑： ```tsx const colHeights = new Array(colCount).fill(0); // 记录每列累计高度 measured.forEach(({ index, height }) => { // 找到当前最矮的列 const shortest = colHeights.indexOf(Math.min(...colHeights)); // 把元素放进去 cols[shortest].push(index); // 更新该列高度 colHeights[shortest] += height + gap; }); ``` 每次遍历所有列的高度，找到最矮的那列，将当前元素放入。这保证了最终各列高度差异最小。 #### ③ 为什么需要防抖？多张图片可能几乎同时加载完成，每张图片的 `load` 事件都会触发回调。防抖避免了短时间内多次重排： ```tsx redistributeTimerRef.current = setTimeout(() => { requestAnimationFrame(redistribute); // 在下一帧执行，确保 DOM 已更新 }, 50); ``` #### ④ 图片加载监听瀑布流依赖准确的高度测量，而图片未加载时高度为 0。必须等图片加载完成后才能获取正确高度： ```tsx images.forEach((img) => { if (img.complete && img.naturalHeight > 0) { loadedCount++; // 已缓存的图片 } else { img.addEventListener('load', onImageReady); // 等待加载 img.addEventListener('error', onImageReady); // 加载失败也要计数 } }); ``` ### 优缺点 | 优点 | 缺点 | | -------------------------- | ------------------------------------------ | | 分配精确，各列高度差异最小 | 需要客户端 JS，不兼容 SSR | | 完全可控 | 首次渲染 → 重分配会产生**布局闪烁** | | 支持动态增删元素 | 代码复杂度较高 | ### 布局闪烁问题这是客户端方案的致命伤，尤其在 SSR 项目（如 Next.js）中： 1. 服务端渲染 HTML → 元素按轮询分配到各列 2. 客户端水合 → JS 测量高度 → 重新分配 3. **元素在列之间跳动**，用户可见这正是我在实际项目中遇到的问题，也是我最终切换到方案二的原因。 --- ## 方案二：服务端 CSS columns 实现（推荐） ### 思路利用 CSS 原生的 `columns` 属性，浏览器自动将内容分配到多列中并平衡高度。纯 CSS，零 JS，完美兼容 SSR。 ### 完整代码 ```tsx import { Children, ReactNode } from 'react'; interface MasonryGridProps { children: ReactNode; mobileColumns?: number; desktopColumns?: number; gap?: number; className?: string; } // Tailwind CSS 类映射 const columnClasses: Record = { 2: 'columns-2', 3: 'columns-3', 4: 'columns-4', }; const mdColumnClasses: Record = { 2: 'md:columns-2', 3: 'md:columns-3', 4: 'md:columns-4', }; export default function MasonryGrid({ children, mobileColumns = 2, desktopColumns = 4, gap = 16, className = '', }: MasonryGridProps) { const items = Children.toArray(children); const mobileClass = columnClasses[mobileColumns] || 'columns-2'; const desktopClass = mdColumnClasses[desktopColumns] || 'md:columns-4'; return (

{items.map((item, i) => (

{item}

))}

); } ``` ### 代码解析 #### CSS `columns` 属性 ```css columns: 4; /* 分为 4 列 */ column-gap: 16px; /* 列间距 */ ``` 浏览器会自动将子元素分配到各列中，并尽量使**各列总高度相近**。不需要任何 JS 计算。 #### `break-inside-avoid` ```css break-inside: avoid; ``` 防止单个卡片被截断到两列中。这是 CSS columns 布局的关键属性，确保每个元素完整地出现在同一列内。 #### 响应式通过 Tailwind CSS 的响应式前缀实现： ```html

``` - 移动端（< 768px）：2 列 - 桌面端（≥ 768px）：4 列无需 JS 监听 resize，纯 CSS 媒体查询。 #### 垂直间距 CSS columns 不支持 `row-gap`，需要用 `margin-bottom` 代替： ```tsx

{item}

``` ### 优缺点 | 优点 | 缺点 | | ------------------------ | ---------------------------------------------------- | | 纯 CSS，零 JS | 元素排列顺序是先列后行（↓→），不是先行后列（→↓） | | 完美兼容 SSR，无布局闪烁 | 高度平衡由浏览器决定，无法精确控制 | | 代码极其简洁 | 不支持动态插入时的动画 | | 性能最优 | | ### 排列顺序说明 CSS columns 的元素排列顺序是**纵向优先**： ``` 方案二（CSS columns）方案一（JS 最短列优先） ┌─────┬─────┐ ┌─────┬─────┐ │ 1 │ 4 │ │ 1 │ 2 │ │ 2 │ 5 │ │ 3 │ 4 │ │ 3 │ 6 │ │ 5 │ 6 │ └─────┴─────┘ └─────┴─────┘ ``` 对于相册、图库类场景，纵向排列其实更自然（类似 Pinterest、小红书），视觉上没有违和感。 --- ## 如何选择？ | 场景 | 推荐方案 | | ---------------------------- | ------------------------------- | | SSR 项目（Next.js、Nuxt 等） | **方案二**（CSS columns） | | 需要精确控制分配顺序 | 方案一（JS） | | 需要动态加载 / 无限滚动 | 方案一（JS） | | 追求性能和简洁 | **方案二**（CSS columns） | | 图库 / 相册 / 瀑布流列表 | **方案二**（CSS columns） | **我的结论**：除非有特殊需求（如精确的横向阅读顺序），否则优先使用 CSS columns 方案。它简单、高效、无闪烁，是瀑布流布局的最佳实践。

瀑布流布局的两种实现方案：客户端 vs 服务端

Comments (0)