纯 css 的 column-count 是唯一真正“零 js、开箱即用”的瀑布流方案，但仅适用于静态内容、seo/可访问性要求不高的内部页面；上线必须 fallback 到 grid + grid-auto-flow: dense 或 js 库。
纯 CSS 的 column-count 是唯一真正“零 JS、开箱即用”的瀑布流方案，但它只适合静态内容、对 SEO/可访问性要求不高的内部页面；真要上线用，得 fallback 到 grid + grid-auto-flow: dense，或直接上 JS 库——别被“纯 CSS 瀑布流”标题骗了。
column-count 能用但必须加这三行 CSS
很多人写了 column-count: 3 却发现卡片被截断、列高不齐、图片塌陷，问题不在属性本身，而在没配齐关键声明：
-
break-inside: avoid必须加在每个.item上（Firefox 还得额外加page-break-inside: avoid） -
img标签默认是inline，会在列底留白，必须强制display: block - 容器不能设
overflow: hidden，否则最后一列可能被剪掉
示例最小可用组合：
.masonry {
column-count: 3;
column-gap: 1rem;
}
.masonry .item {
break-inside: avoid;
page-break-inside: avoid; /* Firefox */
margin-bottom: 1rem;
}
.masonry img {
display: block;
width: 100%;
height: auto;
}
grid-template-rows: masonry 只在 Chrome/Edge 116+ 有效
这个属性写出来很美，但截至 2026 年 8 月，Safari 和 Firefox 完全不识别它——不是兼容性差，是根本没实现。所以不能裸写，必须包在 @supports 里作降级：
.masonry {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@supports (grid-template-rows: masonry) {
.masonry {
grid-template-rows: masonry;
}
}
降级后的 grid 布局虽不是真 Masonry，但视觉接近，且 DOM 顺序与显示顺序一致，对键盘 tab、屏幕阅读器、打印都友好。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
JS 方案里最常崩的是图片加载时机
用 Masonry 或手写“最短列插入”逻辑时，90% 的错位问题都出在图片还没加载完就计算了高度：
-
img.naturalWidth === 0时调用 layout，位置必然错乱 - 懒加载图片（
loading="lazy"）更危险：可能永远不触发load事件 - 解决方式不是等所有图 load 完再排版，而是给每张图加
onload回调，加载一张就重算一列
安全写法示例：
img.addEventListener('load', () => {
masonry.layout(); // 或手动更新对应列高度
});
// 若用 IntersectionObserver，需监听 isIntersecting && img.complete
移动端 iOS Safari 的点击失效不是布局问题
瀑布流容器设了 overflow-y: auto 后，里面卡片的按钮点不动、滑动卡顿——这不是 CSS 写错了，是 iOS 旧内核的渲染 bug：
- 仅 iOS 15 及更早版本需要
-webkit-overflow-scrolling: touch - iOS 16+ 已废弃该属性，加了反而可能干扰原生滚动
- 真正要检查的是：卡片是否含
position: absolute子元素？这类元素在 overflow 容器里容易丢失 pointer-events
建议统一加一层 style="touch-action: manipulation" 在卡片根节点上，比硬加 -webkit 属性更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
