wwww.html
6.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<link rel="stylesheet" href="../js/layui/layui.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
body,html{
height: 100% !important;
}
</style>
<body>
//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>
<ul class="flow-default" style="border: 1px solid #000;height: 100% !important;" id="LAY_demo1"></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"></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=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/285892163/TB2qu2HX9Zb61BjSZPfXXaU.pXa_!!285892163.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/704998060/TB2S.gAXTgc61BjSZFkXXcTkFXa_!!704998060.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/117202952/TB25lckX_AX61Bjy0FcXXaSlFXa_!!117202952.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2qijoX9Zb61BjSZPfXXaU.pXa_!!162734861.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/96216586/TB2S7EfXHMc61BjSZFFXXaDLFXa_!!96216586.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i8/TB1jSSFNFXXXXcoXFXXYXGcGpXX_M2.SS2_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2ylbsX37c61BjSZFKXXb6hFXa_!!162734861.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/117202952/TB2FdyZajUd61BjSZPcXXc6hXXa_!!117202952.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/777105914/TB2t.qbXZwb61Bjy0FfXXXvlpXa_!!777105914.jpg_400x400q90.jpg?t=1511489211318">
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/TB1XzupNFXXXXcpXXXXXXXXXXXX_!!0-item_pic.jpg_400x400q90.jpg?t=1511489211318">
</div>
<p style="margin-top: 20px;">
无论滚动条上滑还是下滑，都只始终加载当前屏的图片（你可以快速拉动滚动条到中间区域，然后再往上滑动试试）
<br>Layui的图片懒加载，除了对滚动条的性能进行了美好的优化，也对图片的“当前屏”进行了高效计算，无惧于任何规模庞大的图片数量！
</p> -->
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ item.modname }}</span>
<span>{{ item.alias }}：</span>
<span>{{ item.site || '' }}</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</ul>
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('laytpl', function(){
//第三步：渲染模版
var data = { //数据
"title":"Layui常用模块"
,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
});
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>