CSS 瀑布流相册（Pinterest 风格）

CSS 瀑布流相册（Pinterest 风格）: 用途

瀑布流布局把高度不同的照片无缝拼入各列，就像 Pinterest。粘贴照片地址，选择手机、平板和电脑上的列数、间距、圆角以及照片上的说明文字。

代码使用所有浏览器都支持的 CSS columns，并在 @supports 中加入 CSS 原生瀑布流（display: grid-lanes，2026 年 3 月随 Safari 26.4 发布，Chrome 和 Firefox 尚无稳定支持），符合渐进增强的建议。页面会说明两种技术在顺序上的差异。

使用方法

1. 粘贴照片地址。
2. 调整列数、间距和圆角。
3. 复制代码。

使用场景

• 摄影师作品集。
• 美容院或工作室的作品相册。
• 灵感墙。

常见问题

什么是瀑布流布局？

这种网格里的项目宽度相同、高度不同，每个项目紧接在同一列上一个项目的下方，不留空白。因 Pinterest 而广为人知，适合混合竖版和横版照片。

需要 JavaScript 吗？

不需要。代码使用 CSS columns，所有浏览器都支持。在已有 CSS 原生瀑布流（display: grid-lanes，2026 年 3 月随 Safari 26.4 发布）的浏览器中，@supports 会启用新版本，它按从左到右的顺序排列照片。

为什么用 CSS columns 时照片顺序会变？

使用 columns 时，照片先沿第一列向下排列，再进入第二列，就像报纸一样。如果顺序很重要（例如最新的在前），请把重要的放在列表开头并使用较少的列，或者等 grid-lanes 在其他浏览器中推出。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具