NO.10瀑布流布局
/*
* 使用方式调用PAGE.init(event)传入父级ID
* @gap设置项目间隙
*/
const PAGE = {
data: {
gap:10
},
init: function (id) {
this.render(id);
},
render: function (id) {
let listWidh = document.getElementById(id).offsetWidth;
let items = document.getElementById(id).children;
let itemWidth = items[0].offsetWidth;
let gap = PAGE.data.gap;
//项目父级宽度/项目宽度+间隙 = 列数
let columns = parseInt(listWidh / (itemWidth + gap));
let arr = [];
for (var i = 0; i < items.length; i++){
if (i < columns) {
items[i].style.top = 0;
items[i].style.left = (itemWidth + gap) * i + 'px';
arr.push(items[i].offsetHeight)
} else {
let minHeight = arr[0];
let index = 0;
for (let i = 0; i < arr.length; i++){
if (minHeight > arr[i]) {
minHeight = arr[i];
index = i;
}
}
items[i].style.top = arr[index] + gap + 'px';
items[i].style.left = items[index].offsetLeft + 'px';
arr[index] = arr[index] + items[i].offsetHeight + gap;
}
}
}
}
//监听父级size变化
window.onresize = function () {
PAGE.init();
};
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
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