uni-app 瀑布流需用 JS 动态分发图片至最短列并实时更新高度数组，禁用 column-count/grid；scroll-view 须避坑：禁 absolute、不用 vh、子项变高后需手动重算滚动高度；分类切换时必须同步重置高度数组与分列数据。

uni-app 没有原生瀑布流组件，scroll-view 和普通 view 都不支持 column-count 或 display: grid 瀑布流（尤其在小程序端会被忽略或降级），左右双栏联动必须靠 JS 动态分发 + 高度追踪实现。

用 height 数组动态分配图片到最短列

核心是维护一个长度为列数的数组，比如两列就用 [0, 0] 记录当前左右列总高度；每张图加载完真实高度后，找最小值索引，塞进对应列并更新高度。不能按奇偶下标硬分——那样高度失衡，视觉上就是“左高右低”或“先堆满一列再堆另一列”，不是真瀑布流。

• 图片宽高必须提前知道：服务端返回 width/height 字段最稳；否则用 uni.getImageInfo 异步获取，但得先占位（比如固定 200rpx 高）防重排抖动
• 别等所有图片 onLoad 完再统一计算：改成“边加载边插入”，用 Promise.all 控制并发（≤ 5 张），避免卡顿
• 列数别写死：uni.getSystemInfoSync().screenWidth 判断，比如 > 750px 用 3 列，否则用 2 列

scroll-view 的三个致命坑必须避开

scroll-view 是目前 uni-app 唯一能稳定监听滚动触底的容器，但它对样式极其敏感，尤其在小程序里：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 禁用 position: absolute 子元素——iOS 微信里会丢失 scrolltolower 触发，安卓也可能错位
• 不能设 height: 100vh——小程序不识别 vh 单位，得用 calc(100vh - 100rpx)（减掉导航栏、tabbar 等实际占用高度）
• 子项高度变化后，scroll-view 不会自动重算滚动高度，必须手动调用 uni.createSelectorQuery() 获取最新高度，再 setData 更新，否则底部留白或触发不了下一页

左右双栏联动时，分类切换要清空高度缓存

当左侧菜单切换分类，右侧瀑布流数据重置，但很多人只清了 list 和 columnList，忘了重置 columnHeight = [0, 0]。结果新数据还往旧高度上叠，第一张图就掉到屏幕外，或者首屏空白。

• 每次分类变更，除了重置数据源，必须同步重置高度数组和分列二维数组（如 [[ ], [ ]]）
• 如果用了作用域插槽（如 ），确认其内部是否自动重置高度状态；没文档说明的，宁可自己封装一层 wrapper 手动控制
• 调试时打印 columnHeight 变化，比看 UI 更快定位“为什么第一张图不见了”

真瀑布流的关键不在布局样式，而在高度状态是否实时、准确、可重置。图片加载异步性、小程序渲染机制、scroll-view 的行为边界，三者叠加后，任何一步缓存没清理干净，都会导致列高漂移——这个点最容易被忽略，也最难 debug。