flow.load 渲染为单列是因为它仅负责数据追加和滚动监听，不处理布局；需配合 css column-count 等样式实现瀑布流，且容器必须设置固定高度、position: relative，并正确调用 next() 才能正常工作。
flow.load 本身不实现瀑布流布局，只负责滚动加载数据；要呈现瀑布流效果，必须配合 css 瀑布流样式（如 column-count）或 js 布局库（如 masonry），layui 不内置布局逻辑。
为什么 flow.load 渲染出来还是竖着一列？
Layui 的 flow.load 只做「数据追加」和「滚动监听」，它把 HTML 字符串直接 insertAdjacentHTML('beforeend', ...) 到容器里，完全不管排列方式。如果你的容器是普通 <div>，浏览器默认按文档流从上到下排，当然是一列到底。<ul>
<li>检查容器是否设置了 <code>column-count: 3 或类似多列 CSS（最轻量方案）
display: flex 或 display: grid 覆盖了多列行为break-inside: avoid（会阻断分列，导致单列堆积）column-fill: balance 可能失效，建议显式设 column-fill: auto
用 CSS column-count 实现真·轻量瀑布流
不用额外 JS 库，纯 CSS 就能跑通，且兼容性好（IE10+）。关键是要让容器「主动分栏」，而非依赖 JS 计算位置。
.flow-container {
column-count: 3;
column-gap: 16px;
column-fill: auto;
height: 600px; /* 必须有固定高度或 max-height，否则 flow 不触发 */
overflow-y: auto;
position: relative; /* loading 图定位需要 */
}
.flow-item {
break-inside: avoid; /* 可选：防子项跨列断裂，但会牺牲瀑布流错落感 */
margin-bottom: 16px;
display: inline-block;
width: 100%;
}
-
height或max-height是硬性要求 ——flow.load默认监听容器自身滚动，没高度就没滚动条，事件压根不触发 - 子项用
inline-block（不是block）才能被 column 模式正确切分 - 如果内容含图片，记得在
done回调末尾手动调flow.lazyimg()，否则新插入的图不懒加载
scrollElem 设错导致滚动监听失效
很多人以为 flow.load 监听的是页面 window 滚动，其实默认监听的是 elem 自身 —— 但前提是它得能滚动。一旦设错 scrollElem，比如指向一个没溢出的父级，或者用了模糊选择器（如 .list），就会静默失败。
- 显式写死
scrollElem: '#ID-flow-demo'，和elem保持一致（最稳） - 不要依赖默认值，尤其当容器嵌套深、父级有
overflow: hidden时 - 用浏览器 DevTools 检查目标元素是否真有 vertical scrollbar，没 scrollbar 就没 scroll 事件
- 动态插入容器后，必须等 DOM 更新完成再调
flow.load，否则querySelector找不到节点
done 回调里漏掉 next() 就彻底卡住
done(page, next) 是 flow 的驱动核心，不是通知回调。你不调 next(data, hasMore)，它就认为「这页还没准备好」，后续任何滚动都不会再触发。
-
next()第一个参数是 HTML 字符串（不是数组），第二个是布尔值表示「是否还有下一页」 - 异步请求后，必须在
then或setTimeout里调next，不能只拼字符串就结束 - 服务端返回空数组时，也要调
next('', false)，否则用户会无限拉取空白页 - 如果用了 Promise 链，注意错误要
catch并调next('', false)，否则 loading 图一直转
最常被忽略的一点：flow 的 loading 图是绝对定位插进容器里的，如果容器没设 position: relative，它会飞到页面左上角甚至被裁掉 —— 这时候你以为没触发，其实是触发了，只是 loading 和内容都看不见。
