纯css瀑布流面试考察重点是column-count深度理解与避坑能力：必须加break-inside: avoid及-webkit前缀，容器禁设height，img须包裹在position: relative的.item中；需用aspect-ratio或padding-top占位防加载跳动；结构必须扁平，.item须为直接子元素。
纯 CSS 手写瀑布流在面试中基本不考察“真正 Masonry”，而是考你对 column-count 的理解深度、对 DOM 结构敏感度，以及能否预判并规避常见渲染崩塌点——写出来不难，但能讲清为什么这么写、哪里会翻车，才算过关。
为什么不能直接用 display: grid; grid-template-rows: masonry
这个写法在 Chrome/Edge 116+ 虽然能跑，但面试官一问“Safari 和 Firefox 怎么办”，你就得立刻收住。它不是标准特性，而是实验性前缀行为，grid-template-rows: masonry 在非 Chromium 内核下会被整条规则忽略，降级为普通 grid（所有子项堆在第一行）。更关键的是：它不支持图片异步加载后的重排，break-inside 类语义也完全不生效。所以面试手写时主动避开它，是专业性的体现。
column-count 必须配合的三处硬性约束
很多候选人只写个 column-count: 3 就交卷，但实际运行十有八九错位或截断。真正可用的最小闭环包含：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
.masonry > *上必须加break-inside: avoid，且要显式写-webkit-column-break-inside: avoid兼容 Safari - 容器不能设
height或min-height: 0，否则列高塌陷，卡片叠在一起 -
img必须包裹在块级容器（如.item）里，不能裸放；.item要设position: relative，否则内部绝对定位元素（如价格 badge）会脱离列高计算
图片加载导致布局跳动？面试官最想听你怎么预留高度
这是高频翻车点。DOM 渲染时 img 高度为 0，列按空容器排，图片加载后突然撑开，下面所有列往下掉。解决思路不是等加载完再渲染（性能差），而是提前占位：
- 现代方案：
img { aspect-ratio: 4/3; width: 100%; height: auto; }—— 简洁有效，但需说明 fallback - 兼容方案：用
padding-top: 75%+position: absolute模拟宽高比，img绝对定位铺满父容器 - 绝对不要写
img { height: 200px }或依赖width/heightHTML 属性，它们在响应式场景下已失效
动态插入新卡片时，为什么不能调 layout.reloadItems()
如果你用 Masonry.js（面试中允许引入库），这里是个典型陷阱。每次新增一项就调 reloadItems()，它会清空整个网格、重新计算全部项位置，O(n²) 复杂度，滚动中插入几十张图就会卡顿。正确做法是：
- 初始化时传入
itemSelector: '.item'，确保选择器精确匹配直系子元素 - 新增 DOM 后，只调
layout.appended(newElements)，它只计算新项、插入最短列，不影响已有布局 - 务必等图片加载完成再 append，可用
imagesLoaded插件监听，或用IntersectionObserver+img.naturalHeight判断
真正容易被忽略的，是结构扁平性——.masonry 下每个 .item 必须是直接子元素。中间插一层 wrapper，break-inside 就失效，而这个错误在小数据量时根本看不出来，上线后数据一多立刻出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
