layui的流加载，点击切换流加载内容，需要多次flow.load，page混乱解决方案

layui的流加载，如果需要点击切换流加载的内容，同时写多个flow.load会导致多次调用flow导致整体page混乱

解决方案如下：

html：

<div class="model-list">
<ul id="LAY_demo1" style="width: 100%; height: 650px; overflow: auto;"></ul>
</div>

JavaScript：

//第一次初始化的加载

//流加载
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //流加载容器
,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
,isAuto:true
,done: function(page, next){ //执行下一页的回调
//模拟数据插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 16; i++){
lis.push('<li><div class=\'layui-col-md3 carsModel\'><img class=\'cars\' src=\'images/dzmt.JPG\'><p><img src=\'images/EN.png\'><span>一汽-大众</span></p></div></li>')
}
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < 10); //假设总页数为 10
}, 500);
}
});

});

//其他点击事件的加载

$(".MOorderstab ul li").click(function(){
$("#LAY_demo1").remove();
$(".model-list").append("<ul id=\"LAY_demo1\" style=\"width: 100%; height: 650px; overflow: auto;\"></ul>");
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //流加载容器
,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
,done: function(page, next){ //执行下一页的回调
//模拟数据插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 16; i++){
lis.push('<li><div class=\' layui-col-md3 carsModel\'><img class=\'cars\' src=\'images/jr.JPG\'><p><img src=\'images/EN.png\'><span>本田-竟瑞</span></p></div></li>')
}
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < 10); //假设总页数为 10
}, 500);
}
});

});
});

思路是：当点击时间触发时，把ul移除重新加载ul，相当于把之前的删除重新加载了flow.load。每次点击page从第一页加载