技能介绍

解决什么问题

当页面里同时存在横版、竖版、方图等不同比例的图片时，传统网格会强迫所有单元格等高，要么裁切画面，要么留下大片空白。瀑布流（Masonry）按列堆叠、像砌砖一样补齐空隙，让每张图保留原始比例，适合图库、作品集、Pinterest 式浏览这类以视觉为主的场景。难点不在于「能不能做」，而在于选错布局会连带牺牲可访问性、SEO 与性能。

技能如何工作

选型判断：对照 masonry 与 grid 的对照表——内容不等高、比例混杂、以浏览发现为主时用瀑布流；商品、模板、一致高度的卡片列表用网格。同时给出与 Bento、Carousel 的边界对比。
结构拆解：列数（2–4 列，流式或固定）、卡片（自然高度）、间距（水平与垂直一致）、填充顺序（列内自上而下）。
实现路径：CSS columns（column-count，零 JS，但会先填满第一列再换列）；Masonry.js 等库（真正的从左到右填充，需 JS）；CSS Grid + grid-auto-flow: dense（近似方案，无 JS）。
配套实践：懒加载、保留原图比例、缩略图优先、控制性能开销。

适用边界与注意点

可访问性：纯视觉瀑布流会打乱屏幕阅读器的 DOM 顺序，需保证 DOM 逻辑顺序合理。
SEO：瀑布流常配无限滚动，爬虫无法模拟滚动，初始视图之外的内容不可被发现；应提供带完整 URL 的分页组件页、配合 pushState，或对 SEO 关键内容直接使用传统分页。
性能：大量图片时瀑布流偏重，简单场景用网格即可。
首次调用时技能先用一两句话说明覆盖范围与价值，再进入正式输出；后续调用直接给结果。