You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Demo< / title >
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
< link href = "//unpkg.com/layui@2.9.1/dist/css/layui.css" rel = "stylesheet" >
< style >
. flow-demo {
height : 400 px ;
overflow : auto ;
font-size : 0 ;
}
. flow-demo li {
display : inline-block ;
margin : 0 5 px ;
font-size : 14 px ;
width : 48 % ;
margin-bottom : 10 px ;
height : 100 px ;
line-height : 100 px ;
text-align : center ;
background-color : #eee ;
}
< / style >
< / head >
< body >
< div class = "flow-demo" id = "ID-flow-demo" style = "width: 300px;height: 300px;" > < / div >
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
< script src = "//unpkg.com/layui@2.9.1/dist/layui.js" > < / script >
< script >
layui . use ( function ( ) {
var flow = layui . flow ;
// 流加载实例
flow . load ( {
elem : '#ID-flow-demo' , // 流加载容器
scrollElem : '#ID-flow-demo' , // 滚动条所在元素，一般不用填，此处只是演示需要。
done : function ( page , next ) { // 执行下一页的回调
// 模拟数据插入
setTimeout ( function ( ) {
var lis = [ ] ;
for ( var i = 0 ; i < 8 ; i ++ ) {
lis . push ( '<li>' + ( ( page - 1 ) * 8 + i + 1 ) + '</li>' )
}
// 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
// pages 为 Ajax返回的总页数， ，
next ( lis . join ( '' ) , page < 10 ) ; // 此处假设总页数为 10
} , 520 ) ;
}
} ) ;
} ) ;
< / script >
< / body >
< / html >
