JS-瀑布流

2018-07-09 分类：JavaScript 作者：管理员阅读（485）

概要：很多电商网站都有瀑布流的应用，早期在蘑菇街看到瀑布流的应用，每个图片宽度一样，不一样的是高度，滚动条滚动到一定位置就会加载图片

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

<html>
<head>
<meta charset="utf-8" />
<title>简易瀑布流</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}

#list {
width: 1110px;
margin: 0 auto;
}

#list li {
width: 212px;
float: left;
padding: 5px;
}

.div {
border: 1px solid #333;
padding: 5px;
margin-bottom: 10px;
}

.img {
width: 200px;
display: block;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
<script type="text/javascript">
window.onload = function () {

/*实现：5个li分成5列，通过判断当前哪一个li高度最小，然后把div插入到那个li里面*/
//获取ul元素
var oList = document.getElementById('list');
//获取ul里的li元素
var aLi = oList.getElementsByTagName('li');
//标记flag 用来控制滚动触发函数
var flag = true;
//json数据
var json = {
'data': [{
'src': 'http://s11.mogucdn.com/mlcdn/55cf19/180606_71eba4fi6d28dcdfe8c5cbga82i9j_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180524_2i8b422ac3kj01ib90ja7i18kjh88_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/55cf19/180630_4eg021di6l8e0087c6ie0d0k1die1_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180408_12ak0afkihihb401d6gaiilhblkb2_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180510_2hehj25hbkibf6617122h948jc80c_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/p1/160719/36434224_ifqwcojqgi4wgolehezdambqgyyde_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180324_6hb292f3ik9cad2aka6j0e75lbl8e_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180507_7kfbhf7fk49eg9agle3j7ddklkh9k_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180709_6cfh4f8e8c8l9756f8306jf1la2l4_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180424_883kc5c5gfj1f611hh69fj01e91j4_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180423_72h6cjf0li1if4kg89706083d4jl9_800x1200.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180313_6icf64185a0f6fel9glc3bdki4699_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180509_6dffclbehblh5h9b0k8geik1ejjl6_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180327_57lj209b86e4d870f5k316j68bc8l_800x1200.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180414_4gg153j361cl5i288156lh7jbai19_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180705_4gc67cajk6hib80kj67d6akh2ifga_640x936.jpg_240x320.v1cAC.webp'
},
],
'imgH': [{
'height': '232px'
}, {
'height': '264px'
}, {
'height': '300px'
},
{
'height': '289px'
}, {
'height': '267px'
}, {
'height': '278px'
},
{
'height': '300px'
}, {
'height': '234px'
}, {
'height': '271px'
},
{
'height': '251px'
}, {
'height': '363px'
}, {
'height': '333px'
},
{
'height': '333px'
}, {
'height': '320px'
}, {
'height': '300px'
},
{
'height': '333px'
}, {
'height': '320px'
}, {
'height': '300px'
},
{
'height': '333px'
}, {
'height': '320px'
},
]
}
getLoad();
//加载数据方法
function getLoad() {
for (var i = 0; i < json.data.length; i++) {
var min = myMin();
var oDiv = document.createElement('div');
oDiv.className = 'div';
var oImg = document.createElement('img');
oImg.className = 'img';
oImg.src = json.data[i].src;
/*这里必须要设置高度，测试中发现js会把每一个节点、属性
创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/
oImg.style.height = json.imgH[i].height;
oDiv.appendChild(oImg);
//高度最小的li插入div
aLi[min].appendChild(oDiv);
}
flag = true;
}
//获取到当前li高度最小的索引
function myMin() {
var index = 0;
var min = aLi[index].offsetHeight;
for (var i = 1; i < aLi.length; i++) {
if (aLi[i].offsetHeight < min) {
index = i;
min = aLi[index].offsetHeight;
}
}
return index;
}
//监听滚动
window.onscroll = function () {
//要获取当前页面的滚动条纵坐标位置
var scroT = document.documentElement.scrollTop || document.body.scrollTop;
//获取页面可视区的高度
var clieH = document.documentElement.clientHeight || document.body.clientHeight;
//获取到当前li高度最小的索引
var minN = myMin();
//这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了
if ((aLi[minN].offsetTop + aLi[minN].offsetHeight) < (scroT + clieH)) {
if (flag) {
flag = false;
getLoad();
}
}
};
};
</script>
</head>

<body>
<ul id="list" class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>

</html>

总结：
在Html页面中创建ul，再在ul创建5个li，5个li分成5列，
通过滚动条监听事件，判断当前哪一个li高度最小，
然后把div插入到那个li里面

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏