uni-app 不支持真正的多列等高瀑布流，推荐 JS 动态分组 + 多列 flex-direction: column 实现跨平台稳定布局，需处理图片占位、rpx 精度及高度塌陷等问题。
uni-app 里用 flex 做瀑布流会错行？别硬刚，它不支持真正的多列等高瀑布流
uni-app 的 view 不支持 CSS 的 column-count 或 display: grid 真瀑布流（即各列高度自动均衡、图片按列顺序填充），所谓“伪瀑布流”本质是多列绝对定位或 JS 分组 + flex 列布局。直接写 flex-direction: column; flex-wrap: wrap 在 H5 可能看似有效，但在小程序（尤其是微信）会完全失效或错位——因为底层渲染引擎不支持该组合。
真正能跨平台稳定跑的方案只有两种：JS 分组 + 多列 flex-direction: column，或使用第三方插件如 uni-read-more 配合自定义布局。前者可控性强，推荐手写。
怎么用 JS 动态分组实现列数可调的瀑布流？
核心思路：把图片数组按列数 colCount 拆成 colCount 个子数组，每列用一个 view 包裹，设为 flex-direction: column，再整体用 flex-direction: row 横向排列。列数变化时重新分组即可。
-
colCount推荐根据屏幕宽度动态算：Math.min(3, Math.floor(uni.getSystemInfoSync().windowWidth / 150))（150 是单图最小宽度估算值） - 分组函数要处理余数：用
Array.from({ length: colCount }, (_, i) => list.filter((_, idx) => idx % colCount === i))是常见写法，但性能差；更优是遍历一次：list.reduce((acc, item, i) => { acc[i % colCount].push(item); return acc; }, Array.from({ length: colCount }, () => [])) - 每列内图片需设固定宽（如
width: 100%）、aspect-ratio或显式height，否则高度塌陷导致列高不一致
为什么不能直接用 uni-app 的 scroll-view + sticky 模拟瀑布流？
因为 scroll-view 内部不支持 position: sticky（小程序基础库限制），且 scroll-view 的滚动性能在长列表下明显劣于原生 page 滚动。强行用 transform: translateY 手动控制图片位置，会触发频繁重排，iOS 上卡顿明显，Android 上还可能因 canvas 渲染机制导致图片闪烁。
另外，uni-app 的 onReachBottom 在 scroll-view 里需手动判断滚动位置，容易误触或漏触，不如直接监听页面级滚动可靠。
小程序真机上图片错位、列高不齐？重点检查这三处
这是最常被忽略的细节：
- 图片加载前高度为 0，导致列容器高度塌缩 —— 必须给每张图的父
view设最小高度，比如min-height: 200rpx，或用onLoad回调后强制this.$forceUpdate() - 不同平台对
rpx解析精度不同（尤其 iOS 小程序），列宽用rpx计算时建议向下取整，避免累计误差，例如：width: calc(100% / 3 - 10rpx)改为width: 32.333333%并加box-sizing: border-box - 微信小程序中，
flex: 1在嵌套flex-direction: column下表现异常 —— 列容器必须显式设height: 100vh或父级高度撑开，不能依赖flex: 1
动态列数不是难在逻辑，而是难在各端渲染差异的缝合。列数改了，得同步重算每张图的占位高度、重置滚动位置、防重复请求 —— 这些边界比分组算法本身更耗时间。
