CSS Academy · 课时

瀑布流布局：CSS 与 JS 方法

使用 CSS 的 column-count 和 JavaScript 后备策略创建 Pinterest 风格的瀑布流网格。

瀑布流布局：CSS 与 JS 方法 是 CoddyKit 上的免费 CSS Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是瀑布流

瀑布流布局将项目放入多个列中，每个项目都会填充下一个可用的垂直空间，类似图片灵感网站的布局。项目的列宽相同，但高度各不相同。最终会形成密集且富有动态感的网格，行与行之间不会留下浪费的空白。

CSS 网格瀑布流（实验性）

谷歌浏览器和火狐浏览器在启用实验标志后支持 grid-template-rows: masonry。项目会被放入各列，而行高则根据内容高度确定，使不同高度的项目能够无间隙地排列。这是未来的原生解决方案。

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

CSS 多栏方案

CSS 多栏可以创建类似瀑布流的布局：columns: 3; column-gap: 1rem。项目会自动在每列中从上到下排列。其限制是：项目按列排列（第 1 列顶部、第 2 列顶部……），而不是按行排列，这会影响阅读顺序和可访问性。

避免列间断裂

在每个项目上使用 break-inside: avoid，可以防止项目跨列断裂。否则，高大的卡片可能会被拆分到两列中，使内容从中间截断。使用 CSS 多栏布局展示卡片类内容时，应始终添加这一设置。

JavaScript 瀑布流库

Masonry.js（由大卫·DeSandro 开发）通过计算各列高度，并将每个项目放入最短的列中，重新定位绝对定位的项目。另一个库则在此基础上扩展了排序和筛选功能。两者都需要使用 JavaScript 来计算并应用位置。

CSS 网格与 JS 混合方案

一种轻量方案是：使用固定列数和 1 像素行定义网格，然后根据每个项目的内容高度与行高，使用 JS 设置 grid-row-end: span N。这样项目可以保持网格行对齐，同时实现不同的高度。

使用 ResizeObserver 重新计算

窗口大小变化或图片加载后，瀑布流的位置可能会过时。使用 ResizeObserver 检测尺寸变化并触发重新计算。应对重新计算进行防抖，避免在快速调整大小的过程中产生过多计算。

图片加载与布局稳定性

高度未知的图片会导致瀑布流在图片加载后重新计算。为所有图片提供明确的宽度和高度属性，以便浏览器在加载前预留空间。这样可以防止位置偏移，并减少重新计算的次数。

瀑布流中的无限滚动

向瀑布流布局追加项目时，只需要重新计算受影响的列（也就是新项目所在的列），而不是整个网格。Masonry.js 等库支持追加项目动画和增量布局，无需每批新项目到来时都进行完整的重新布局。

可访问性注意事项

在使用 JavaScript 定位的布局中，视觉上的瀑布流顺序可能不同于 DOM 顺序。应确保键盘焦点顺序遵循 DOM 顺序（符合逻辑的阅读顺序），而不是视觉位置。请谨慎添加 tabindex，或依靠自然的 DOM 流来实现键盘导航。

仅 CSS 瀑布流的权衡

CSS 多栏布局简单且无需 JS，但阅读顺序按列而不是按行排列，也不支持筛选或排序。网格瀑布流目前还不适合生产环境。JavaScript 瀑布流功能完整，但会增加资源体积，并且由于项目位置要在内容加载后计算，因此会产生渲染延迟。

知识检查

哪个 CSS 属性可以防止卡片在两个 CSS 多栏之间拆分？

总结

瀑布流布局可以通过 CSS 多栏（简单但按列排列）、实验性的 grid-template-rows: masonry（面向未来），或 Masonry.js 等 JavaScript 库（功能完整，支持排序和筛选）来实现。每种方案都需要在简单性、可访问性和功能之间进行权衡。

常见问题解答

「瀑布流布局：CSS 与 JS 方法」课时是免费的吗？

是的 — 「瀑布流布局：CSS 与 JS 方法」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「瀑布流布局：CSS 与 JS 方法」这节课中我会学到什么？

使用 CSS 的 column-count 和 JavaScript 后备策略创建 Pinterest 风格的瀑布流网格。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「瀑布流布局：CSS 与 JS 方法」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy