layui的flow模块实现信息流加载与图片懒加载，不提供css流式布局；其核心是滚动检测、动态追加内容及按需触发图片加载，布局效果由html结构和css控制。
layui 的 flow 模块本身不提供“流式布局”（如 CSS Grid 或 Flex 自动换行排版），它实现的是信息流加载（infinite scroll）+ 图片懒加载两个核心能力。所谓“流式布局效果”，其实是靠 HTML 结构 + CSS 控制排列，而 flow 负责滚动检测、动态追加内容、以及按需触发图片加载。关键不在布局方式，而在加载时机与 DOM 管理。
一、下拉加载更多（信息流滚动加载）
核心是 flow.load() 监听容器滚动，到底部时请求并追加新内容：
- 指定
elem为最外层容器（如#content），不是window或表格内部滚动体 -
done回调中拼接 HTML 字符串（如<div><img lay-src="..." src="/loading.gif"></div>），再传给next(html, hasMore) - 必须确保容器有明确高度和
overflow-y: auto，否则滚动事件不触发或距离计算失准 - 避免用
$(window).scrollTop()判断——对局部滚动容器完全无效；应依赖flow内置的滚动位置检测逻辑
二、图片懒加载（lay-src + 占位图）
浏览器看到 src 就会立即请求，所以必须分离“占位”与“真实地址”：
-
img标签中：src设为 loading 图或 base64 空 gif，lay-src存真实 URL - 首次页面加载后调用
flow.lazyimg()，它会扫描所有img[lay-src]并监听视口变化 - 动态插入的内容（如 flow 追加、table.reload）不会被自动接管，每次插入后必须手动再调一次：
flow.lazyimg({ elem: $newImgs }) - 务必限定
elem范围（如'#content img[lay-src]'），避免重复绑定已处理过的图片，影响性能
三、常见坑点与应对
这些细节不处理，懒加载就失效或重复请求：
- 图片地址带时间戳等动态参数时，注意浏览器缓存策略可能让
getBoundingClientRect判定失败，确保lay-src值稳定唯一 - 移动端 Safari 需给滚动容器加
-webkit-overflow-scrolling: touch，否则滚动事件不灵敏，懒加载无法响应 - 表格中使用时，
flow.lazyimg()必须放在table.render().done里执行，并用elem.next('.layui-table-box').find('img[lay-src]')精准定位 - Vue/React 等框架中，DOM 插入时机难控，应在
nextTick（Vue）或useEffect的 commit 阶段后再调lazyimg
四、简单示例结构
HTML 容器 + JS 初始化即可跑起来：
<div id="LAY_demo1"></div>
<script>
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1',
done: function(page, next){
setTimeout(function(){
var lis = [];
for(var i = 0; i < 5; i++){
lis.push('<div class="item">@@##@@');
}
// 追加后立刻重绑图片
next(lis.join(''), page < 10);
flow.lazyimg({ elem: '#LAY_demo1 img[lay-src]' });
}, 800);
}
});
});
</script>
样式上用 .item { display: inline-block; width: 200px; } 就能实现横向流式排列，配合 flow 实现滚动加载+图片按需呈现。
