自适应横向瀑布流布局
# 效果
# 代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>自适应瀑布流布局</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="bigbox">
<div class="container"></div>
</div>
</body>
</html>
<script src="index.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
css简单布局一下，主要依靠js控制
*{
margin: 0;
padding: 0;
}
.container{
width: 90%;
margin: 0 auto;
position: relative;
}
.container img{
position: absolute;
transition: 0.3s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 地址路径不必看，使用的时候直接换成接口返回的路径即可，主要看排列方法
// 容器
const container = document.querySelector('.container');
let img_width = 120; //每张图片的固定宽度
//假数据 不必在意，后面换成接口数据就可以了
var item1 = [
{ image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{ image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}
, { image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230418/ring_1_202304180936108601.png' }
, { image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' }
, { image: 'https://www.hirschmannautomotive-china.com/fenmian.jpg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230406/straight_simple_202304061957004401.jpg' },
{
image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}, { image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230418/ring_1_202304180936108601.png' }
, { image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' }
, { image: 'https://www.hirschmannautomotive-china.com/fenmian.jpg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230406/straight_simple_202304061957004401.jpg' }
]
// 加入图片元素
function createImgs() {
item1.push(...[
{ image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{ image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}
, { image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230418/ring_1_202304180936108601.png' }
, { image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' }
, { image: 'https://www.hirschmannautomotive-china.com/fenmian.jpg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230406/straight_simple_202304061957004401.jpg' },
{
image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}, { image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230418/ring_1_202304180936108601.png' }
, { image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg' }
, { image: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' }
, { image: 'https://www.hirschmannautomotive-china.com/fenmian.jpg' }
, { image: 'http://autosim.adinnet.cn/uploadFile/file/20230406/straight_simple_202304061957004401.jpg' }
])
for (let i = 0; item1.length; i++) {
console.log(i);
// 生成图片的src路径（图片名为：1~15.jpg）
let src = item1[i].image;
console.log(item1[i].image);
let img = document.createElement('img');
img.src = src;
img.width = img_width;
// 每一张图片加载完就设置位置
img.onload = setPositions;
// 将图片添加到容器中
container.appendChild(img);
}
}
// 多加入一下图片
setTimeout(() => {
createImgs();
createImgs();
createImgs();
createImgs();
},100)
// 计算一共有多少列，以及每一列之间的间隙
function cal() {
// 容器宽度
let container_width = container.clientWidth;
// 计算列的数量
let columns = Math.floor(container_width / img_width);
// 计算间隙
let space_number = columns + 1; //间隙的数量
let left_space = container_width - columns * img_width; //计算剩余的空间
let space = left_space / space_number; //每个间隙的空间
return {
space: space,
columns: columns
};
}
// 设置每张图片的位置
function setPositions() {
// 获取列数和间隙
let info = cal();
// 该数组的长度为列数，每一项表示该列的下一个图片的纵坐标
let next_tops = new Array(info.columns);
// 将数组的每一项填充为0
next_tops.fill(0);
for (let i = 0; i < container.children.length; i++) {
let img = container.children[i];
// 找到next_tops中的最小值作为当前图片的纵坐标
let min_top = Math.min.apply(null, next_tops);
img.style.top = min_top + 'px';
// 重新设置数组这一项的下一个top值
let index = next_tops.indexOf(min_top); //得到使用的是第几列的top值
next_tops[index] += img.height + info.space;
// 计算横坐标
let left = (index + 1) * info.space + index * img_width;
img.style.left = left + 'px';
}
// 得到next_tops中的最大值
let max = Math.max.apply(null, next_tops);
// 设置容器的高度
container.style.height = max + 'px';
}
// window.onload=setPositions;
// 定时器
let timer = null;
// 窗口尺寸变动后，重新排列
window.onresize = function () {
console.log(1);
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(setPositions, 100);
}
//分页
function scrollH() {
let lastimg = document.getElementsByTagName('img')
console.log(lastimg[lastimg.length-1].getBoundingClientRect().top,"scrollTop滚动条距离顶部高度");//滚动条距离顶部高度
if (lastimg[lastimg.length - 1].getBoundingClientRect().top < 1000) {
createImgs();
}
}
window.addEventListener("scroll", scrollH,true); //监听滚动事件
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
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
上次更新: 2023/07/10, 15:27:17