展现形式 · 概念
Masonry：不等高内容的瀑布流布局
分析 Masonry 瀑布流对不等高图片等内容的浏览价值，以及视觉与焦点顺序错位、布局移动、难以比较和窄屏退化风险。
Masonry 把高度不同的项目填入多列，减少规则网格中的空白，常被称为瀑布流。它优先形成视觉密度和探索感，不适合表达严格顺序或需要横向对齐的比较关系。
适合与不适合
适合图片作品、灵感集合或高度差异天然存在、访客可以自由探索的独立项目。不适合步骤、搜索排名、商品规格比较、时间顺序或任何必须从左到右再换行阅读的内容。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 能容纳多种媒体比例并减少空白 | 视觉顺序可能与 DOM、键盘顺序不同 |
| 页面具有连续探索和高密度感 | 用户难以判断下一项在哪里 |
| 不要求把所有项目裁成同一高度 | 图片加载会引发布局移动 |
| 对作品型内容较自然 | 项目无法按行对齐，不利于比较 |
内容与布局要求
每项必须可以独立理解，不能依赖相邻位置形成句子或步骤。提前保存媒体尺寸或比例，避免加载后反复重排。不要把商业排序藏在瀑布流的视觉缝隙中；若有排名，应使用明确编号和稳定的线性顺序。
响应式与无障碍
DOM 顺序应是脱离布局后仍合理的顺序，焦点不得在列之间意外跳跃。窄屏优先退化成单列或规则 Grid。图片遵循用途提供文本替代，延迟加载不能让键盘焦点或滚动位置突然变化。
状态与退化
一项时不需要 Masonry；少量项目可用普通 Grid。媒体尺寸未知时先用稳定占位比例。脚本失败或 CSS 能力不足时，内容应成为按 DOM 顺序排列的列表或网格，而不是重叠。
发布前检查
- 用户是否需要比较、排序或按顺序阅读？
- 视觉顺序与键盘顺序是否一致？
- 是否已知图片比例并控制布局移动？
- 单列退化能否完整表达内容？
- Masonry 是否带来真实信息收益，而不仅是造型变化？