layui-流加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流加载</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/global.css" />
<style>
.flow-default{width: 600px; height: 400px; overflow: auto; font-size: 0;}
.flow-default li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}
.flow-default img{width: 100%; height: 100%;}
.site-demo-flow{width: 600px; height: 300px; overflow: auto; text-align: center;}
.site-demo-flow img{width: 40%; height: 200px; margin: 0 2px 5px 0; border: none;}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>信息流 - 滚动加载</legend>
</fieldset>
<ul class="flow-default" id="LAY_demo1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>信息流 - 手工加载</legend>
</fieldset>
<ul class="flow-default" style="height: 300px;" id="LAY_demo2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>图片懒加载</legend>
</fieldset>
<div class="site-demo-flow" id="LAY_demo3">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/285892163/TB2qu2HX9Zb61BjSZPfXXaU.pXa_!!285892163.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/704998060/TB2S.gAXTgc61BjSZFkXXcTkFXa_!!704998060.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/117202952/TB25lckX_AX61Bjy0FcXXaSlFXa_!!117202952.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2qijoX9Zb61BjSZPfXXaU.pXa_!!162734861.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/96216586/TB2S7EfXHMc61BjSZFFXXaDLFXa_!!96216586.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i8/TB1jSSFNFXXXXcoXFXXYXGcGpXX_M2.SS2_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2ylbsX37c61BjSZFKXXb6hFXa_!!162734861.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/117202952/TB2FdyZajUd61BjSZPcXXc6hXXa_!!117202952.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/777105914/TB2t.qbXZwb61Bjy0FfXXXvlpXa_!!777105914.jpg_400x400q90.jpg?t=1494291277528">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/TB1XzupNFXXXXcpXXXXXXXXXXXX_!!0-item_pic.jpg_400x400q90.jpg?t=1494291277528">
</div>
<p style="margin-top: 20px;">
无论滚动条上滑还是下滑，都只始终加载当前屏的图片（你可以快速拉动滚动条到中间区域，然后再往上滑动试试）
<br>Layui的图片懒加载，除了对滚动条的性能进行了美好的优化，也对图片的“当前屏”进行了高效计算，无惧于任何规模庞大的图片数量！
</p>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
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 < 8; i++){
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
}
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < 10); //假设总页数为 10
}, 500);
}
});
flow.load({
elem: '#LAY_demo2' //流加载容器
,scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
,isAuto: false
,isLazyimg: true
,done: function(page, next){ //加载下一页
//模拟插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
}
next(lis.join(''), page < 6); //假设总页数为 6
}, 500);
}
});
//按屏加载图片
flow.lazyimg({
elem: '#LAY_demo3 img'
,scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
});
});
</script>
</body>
</html>
官网流加载
扫一扫
1101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
