uni-app瀑布流需JS动态分配图片至最短列，用height数组维护各列高度；图片需预加载占位，避免重排卡顿；scroll-view需避坑：禁用position: absolute、勿设100vh、用calc计算高度。
uni-app 里没有原生瀑布流组件，得自己实现
uni-app 的 scroll-view 和普通 view 都不支持 CSS 的 column-count 或 display: grid 瀑布流（尤其在小程序端会被降级或忽略），所以不能靠纯样式“一劳永逸”。真实项目中，最稳的方案是用「多列容器 + 动态计算插入位置」，也就是 JS 控制每张图该塞进哪一列。
用 JavaScript 维护多列高度数组来分配图片
核心思路：维护一个长度为列数（比如 2）的数组，存当前每列总高度；每次拿到一张图的高度后，找最短那列塞进去，并更新该列高度。这样视觉上就是自然的瀑布流。
实操建议：
- 图片加载前先占位——用
uni.getImageInfo或服务端返回宽高，避免重排；没宽高时先按固定高度（如 200rpx）占位，加载完再重算布局 - 别等所有图片都
onLoad再统一渲染，会卡顿；改成“边加载边插入”，用Promise.all控制并发量（建议 ≤ 5） - 小程序里
position: absolute定位虽快但难响应滚动，优先用flex布局 +transform: translateY()模拟定位（兼容性更好） - 列数别写死——用
uni.getSystemInfoSync().screenWidth动态算，比如屏幕宽度 > 750px 用 3 列，否则用 2 列
uni-app 中 scroll-view + slot 的常见翻车点
很多人直接套用 H5 的 vue-virtual-scroller 或试图监听 scrolltoupper 实现懒加载，但在小程序里会出问题：
-
scroll-view在 iOS 微信里对子元素position: absolute的滚动监听不可靠，容易漏触发scrolltolower - 用
slot传入瀑布流子项时，如果子组件内部有异步图片加载，父组件无法感知高度变化，导致底部留白或错位 - 不要给
scroll-view设height: 100vh，小程序不认vh单位，得用calc(100vh - 100rpx)这类动态计算（顶部导航栏高度要减掉） - 安卓真机上频繁 setData 大量节点易卡顿，建议用
uni.createSelectorQuery手动获取节点高度做增量更新，而不是全量重绘
推荐轻量实现：基于 computed + v-for 的两列分发逻辑
不用第三方库，几行 JS 就能跑通。假设数据是 imgList，每项含 url 和预估 height（单位 rpx）：
computed: {
columns() {
const cols = [[], []]
const heights = [0, 0]
this.imgList.forEach(item => {
const minIndex = heights[0] <= heights[1] ? 0 : 1
cols[minIndex].push(item)
heights[minIndex] += item.height || 200 // fallback 高度
})
return cols
}
}模板里用两列 flex-direction: column 并排即可：
<view class="waterfall">
<view class="col" v-for="(col, i) in columns" :key="i">
<image v-for="item in col" :src="item.url" mode="widthFix" />
</view>
</view>注意：height 必须是 rpx 单位，且图片 mode="widthFix" 才能按比例缩放；如果服务端没返回高度，就用 uni.getImageInfo 异步补全，但首次渲染先用估算值撑开布局，不然会闪动。
最麻烦的其实是图片宽高比不一致时的列高误差——哪怕只差几个像素，长期累积下来两列会越来越歪。所以实际项目里，建议每 10 张图就重置一次高度数组，或者加个容错阈值（比如两列高度差 > 100rpx 时手动平移几张图过去）。这一步没人提，但上线后一定会遇到。
