uni-app实现瀑布流布局 uni-app多列布局排列实现方案-uni-app-PHP中文网

js动态分配图片到最短列需维护列高数组，插入前找最小值索引并更新高度；预估高度用宽高比+固定宽度，真实高度通过@load回调+boundingclientrect修正；分发逻辑应在computed/watch中完成二维数组构建。

uni-app实现瀑布流布局 uni-app多列布局排列实现方案

uni-app 没有原生瀑布流支持，纯 CSS 的 column-count 或 display: grid 在小程序端会被忽略或降级，必须用 JS 动态分发数据到列并维护高度 —— 这是跨端稳定的唯一路径。

怎么用 JS 动态分配图片到最短列

核心是维护一个列高数组（如 columnHeights = [0, 0]），每次插入新项前找出最小值索引，把该项 push 进对应列，并更新该列高度。注意：这个“高度”不能直接用 DOM 获取，得靠预估或异步加载后回调修正。

图片未加载时，按宽高比 + 固定宽度（如 340rpx）预估高度：height = (340 * item.height) / item.width + 'rpx'
真实高度需等 @load 触发后调用 uni.createSelectorQuery() 获取节点 boundingClientRect，再更新列高并触发重排
别在 v-for 里直接写逻辑分发，应提前在 computed 或 watch 中完成二维数组构建（如 columns = [[], []]）
列数动态计算：用 uni.getSystemInfoSync().screenWidth 判断，> 750px 用 3 列，否则 2 列；单列场景直接退化为普通列表，避免无效计算

scroll-view 布局避坑要点

scroll-view 是瀑布流容器的常见选择，但小程序对它的限制极多，稍不注意就留白、错位、监听失效。

创意扇形排列卡片画廊

基于“创意扇形排列卡片画廊”制作的前端特效源码，包含扇形卡片、旋转展开、层级聚焦、键盘切换，打开 index.html 即可直接查看效果，可替换标题、颜色和图形元素复用。下载包已经整理好特效舞台、样式变量、动画规则和必要脚本，适合用于学习当前效果的实现方式，也方便替换文字、颜色、图形或图片后直接复用。

下载

绝对禁止给 scroll-view 设 height: 100vh —— 小程序不识别 vh，必须用 height: calc(100vh - 100rpx)（减去导航栏/TabBar 高度）
子元素禁用 position: absolute，iOS 微信中会导致 scrolltolower 监听丢失，改用 flex-direction: column + transform: translateY() 模拟定位更稳
不要在 scroll-view 内嵌套带异步加载的自定义组件（如封装好的 WaterfallItem），父组件无法感知子项高度变化，容易底部留白
安卓真机 setData 大量节点易卡顿，建议用 uni.createSelectorQuery 手动查高度做增量更新，而非全量重绘整个 columns

图片加载与占位如何不触发重排抖动

瀑布流最明显的卡顿来源是图片加载后高度突变，导致整列重排、滚动跳动。关键不是“等所有图加载完再渲染”，而是“边加载边占位+懒更新”。

服务端最好返回每张图的宽高字段（width/height），前端按比例算出初始 height 并设为 image 的内联样式，避免空白塌陷
若无服务端配合，用 uni.getImageInfo({ src }) 预加载（并发 ≤ 3），拿到尺寸后再插入对应列，比 onLoad 后再查 DOM 快得多
加载完成后的高度修正必须节流：同一列多次更新只合并一次，避免高频 setData
慎用 mode="aspectFit"，它会强制缩放破坏宽高比，推荐 mode="widthFix" + 显式设 height

懒加载触底判断为什么经常失效

onReachBottom 在页面级可用，但在 scroll-view 内必须用 bindscrolltolower，且触发条件苛刻：滚动区域内容高度 − 可视高度 − scrollTop ≤ 1px 才算“触底”。实际中极易因高度计算不准而漏触发。

不要依赖 scroll-view 自身的 scrolltolower，改用 IntersectionObserver 监听最后一项是否进入视口（小程序基础库 ≥ 2.27.0）
若需兼容老版本，可在最后一项加一个 1px 高的 view 占位符，用 createSelectorQuery 轮询其 top 值是否 ≤ 可视区域高度
请求下一页前先置 loading = true 并禁用再次触发，防止快速上拉重复请求
后端需返回 hasMore: boolean 字段，而不是只靠页码判断，避免因数据删减导致空页仍无限加载