真瀑布流必须用JS动态维护columnHeight数组并实时重分发图片，不能依赖CSS column-count或grid；核心是每张图加载后找最短列插入并更新高度，且分类切换时需同步重置list、columns和columnHeight。
直接说结论：不能靠 CSS column-count 或 display: grid 实现真瀑布流，尤其在小程序端会被忽略或降级；必须用 JS 动态维护列高数组 + 图片加载后实时重分发，否则左右两列高度失衡、首屏空白、触底失效都是常态。
怎么用 columnHeight 数组动态分配图片到最短列
核心不是“按奇偶下标硬分”，而是每张图加载完成（或预估）后，找当前最短列插入并更新高度。这个数组必须可响应式更新，且每次分类切换都要重置。
-
columnHeight = [0, 0]是起点，长度等于列数（如两列就是两个元素） - 插入前调用
Math.min(...columnHeight)找最小值索引，比如0就塞进左列 - 插入后立即更新对应索引高度：
columnHeight[minIndex] += itemHeight - 千万别在
v-for模板里做这个逻辑——得提前在computed或watch里生成二维数组columns = [[], []]，再交给模板渲染 - 服务端返回
width/height字段最省事；没有就用uni.getImageInfo预加载（并发 ≤ 3），别等@load再查 DOM
为什么 scroll-view 容器一设 100vh 就失效
小程序根本不识别 vh 单位，设了等于没设，滚动区域高度塌陷，scrolltolower 永远不触发。
K12语文小红书笔记生产工作流
下载
面向 K12 语文学科的小红书笔记生产工作流。用于根据内容日历或家长痛点选题，核对教材版本与课文证据，把阅读、古诗文、习作等抽象方法落到真实课文、公式、例题和家长可执行动作，并产出标题、3:4 轮播卡片方案、生图提示词、可直接粘贴发布的正文及对抗性验收报告。用户提到小学语文、初中语文、课文解析、语文预习、阅读理解、古诗、作文、小红书图文或教育内容生产时使用。
- 正确写法是：
height: calc(100vh - 100rpx)，其中100rpx要替换成你实际导航栏 + TabBar 的总高度（可用uni.getSystemInfoSync().statusBarHeight+ 自定义 tabBar 高度算） -
scroll-view子项禁用position: absolute——iOS 微信会丢掉scrolltolower，安卓也可能错位 - 子项高度变化后（比如图片加载完），
scroll-view不会自动重算内容高度，必须手动调用uni.createSelectorQuery()获取最新高度，再setData更新容器高度，否则底部留白或下一页不加载
分类切换时为什么第一张图掉出屏幕
只清空了数据列表 list 和分列数组 columns，却忘了重置 columnHeight = [0, 0]。新数据继续往旧高度上叠，视觉上就是“从屏幕下方开始渲染”。
- 每次左侧菜单点击切换分类，必须同步执行三件事：
list = []、columns = [[], []]、columnHeight = [0, 0] - 如果用了封装的
<hy-waterfall>这类组件，确认它内部是否自动重置状态；没文档说明的，宁可自己包一层 wrapper，在watch里手动 reset - 列数也要动态判断：用
uni.getSystemInfoSync().screenWidth，> 750px 用 3 列，否则用 2 列；单列场景直接退化为普通v-for列表，避免无效计算
真正麻烦的不是分列逻辑，而是图片加载时机和高度修正的节奏——占位不准会抖动，查 DOM 太晚会留白，setData 太猛会卡顿。这些细节没对齐，瀑布流就只是“看起来像”，不是“跑起来稳”。
