零基础实现瀑布流应优先用CSS Grid：设display: grid、grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))、grid-auto-flow: dense、gap: 1rem，并为图片添加aspect-ratio或padding-top占位防塌陷。
纯 HTML 无法实现真正的瀑布流自适应，必须配合 CSS（至少 Grid 或 column-count）或 JavaScript；零基础起步时，优先用 display: grid + grid-auto-flow: dense 组合，它不依赖 JS、写法简洁、响应式天然支持，且现代浏览器（Chrome/Edge/Firefox/Safari 16.4+）均已稳定支持。
用 CSS Grid 实现最简自适应瀑布流（零基础可抄）
这是目前对新手最友好的方案：不用写 JS、不用引入库、改几行 CSS 就能跑起来，列数随屏幕自动变化。
-
display: grid是核心，容器必须设这个 -
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))控制列数：小屏 1 列，中屏 2 列，大屏自动加列，auto-fit比auto-fill更合理，避免空列占位 -
grid-auto-flow: dense必须加，否则高图下方会留大片空白，这是瀑布流“错落感”的关键开关 -
gap: 1rem替代旧式grid-gap，Firefox 和 Safari 渲染更稳 - 每张图的父容器（如
.item）建议设overflow: hidden防图片溢出，但**不要在 grid 容器上设overflow: hidden**，否则跨行元素会被截断
图片加载塌陷——零基础最容易翻车的地方
页面一打开，图片全挤在顶部，等加载完才“啪”一下掉下去，这就是塌陷。原因很简单：DOM 渲染时 <img> 高度为 0，Grid 按 0 高分配空间，加载后突然撑开。
- 现代方案：给
<img>直接加aspect-ratio: 4/3（或你图的实际比例），Chrome/Firefox/Safari 16.4+ 原生支持 - 兼容旧版（如 Safari 15 或部分安卓 WebView）：用 padding-top 占位法，在
<img>外包一层<div class="img-wrapper">，设padding-top: 75%（对应 4:3），再把<img>设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover - 禁用全局
img { height: auto }类样式，它会压缩父容器高度 - 别用
width和heightHTML 属性控制比例——它们在响应式布局中已失效，且无法适配不同宽高比
column-count 能不能用？什么情况下可以抄个速成
可以，但只适合练手或内部静态页；它不是真瀑布流，DOM 顺序和视觉顺序不一致，SEO 和可访问性差，且对图片动态加载完全无解。
立即学习“前端免费学习笔记（深入）”；
- 写法确实简单：
column-count: 3+column-gap: 1rem+ 子项加break-inside: avoid - Chrome 下
<img>默认是inline，底部会多出几像素空白，必须加img { display: block } - Firefox 对
column-gap渲染有 1px 偏移，Safari 有时间隙消失，需靠margin-bottom补偿 - 列数响应式切换要靠 JS 监听
resize并手动改style.columnCount，CSS 媒体查询对它基本无效 - 如果只是放 10 张尺寸一致的测试图，想快速看效果，它能用；但一旦加懒加载、用户上传、尺寸不一，立刻崩
什么时候必须上 JavaScript？
当你要做真实生产环境、图片尺寸差异大、需要滚动加载、或必须兼容 Safari 15 / Firefox 115 以下版本时，masonry-layout 是最省心的选择。
- 引入方式：
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script> - 容器必须设
position: relative，子项（如.item）要有明确高度——要么预设固定高，要么用aspect-ratio或 padding 占位 - 初始化写法：
const elem = document.querySelector('.grid');→const msnry = new Masonry(elem, { itemSelector: '.item', columnWidth: '.item' }); - 新增图片后调用
msnry.appended(newItems)，别用reloadItems()，后者性能差且重排全部 - 图片加载完成前就初始化会出错，可用
imagesLoaded插件或监听load事件后再 layout
真正容易被忽略的是图片宽高比处理——无论选 Grid 还是 Masonry，塌陷问题不解决，布局永远是“先乱后齐”，用户体验直接打折扣。零基础起步时，先搞定 aspect-ratio 或 padding 占位，再调样式，比反复改 grid-row 或 JS 计算逻辑要高效得多。
