最近在整理自己以前写的一些js特效，接触到了几个常用的页面特效，其中觉得用原生js实现瀑布流的案例十分有趣,也很简单，于是与大家分享一下
瀑布流
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
思路分析
1 获取到.itemBox 宽度
1 | var itemBox = document.getElementsByClassName('itemBox')[0]; |
2 获取到.item 宽度
1 | var itemW = items[0].offsetWidth; |
3 求出列数
1 | var column = parseInt(itemBoxW / itemW); |
4 求出间距
1 | var distence = (itemBoxW - itemW * column) / (column - 1); |
5 实现瀑布流布局的方法
1 | function waterFull() { |
获取数组的最小值以及索引
1
2
3
4
5
6
7
8
9
10
11
12function getMin(arr) {
var obj = {};
obj.minV = arr[0];
obj.minI = 0;
for (var i = 1; i < arr.length; i++) {
if (obj.minV > arr[i]) {
obj.minV = arr[i];
obj.minI = i;
}
}
return obj;
}6 滚动页面时 加载数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18window.onscroll = function () {
if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
var json = [
{ "src": "../" }
];
for (var i = 0; i < json.length; i++) {
var div = document.createElement('div');
div.className = 'item';
var img = document.createElement('img');
img.src = json[i].src;
div.appendChild(img);
itemBox.appendChild(div);
}
waterFull();
}
}
完整代码
html
1
2
3
4
5
<div class="itemBox">
<div class="item">
<img src="../ alt="">
</div>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
* {
margin: 0;
padding: 0;
}
.itemBox {
width: 1050px;
margin: 0 auto;
position: relative;
}
.item {
border: 1px solid #ccc;
padding: 4px;
position: absolute;
}
</style>
js
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
<script>
window.onload = function () {
var itemBox = document.getElementsByClassName('itemBox')[0];
var items = document.getElementsByClassName('item');
var itemBoxW = itemBox.offsetWidth;
var itemW = items[0].offsetWidth;
var column = parseInt(itemBoxW / itemW);
var distence = (itemBoxW - itemW * column) / (column - 1);
var arr = [];
waterFull();
window.onscroll = function () {
if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
var json = [
{ "src": "../ }
];
for (var i = 0; i < json.length; i++) {
var div = document.createElement('div');
div.className = 'item';
var img = document.createElement('img');
img.src = json[i].src;
div.appendChild(img);
itemBox.appendChild(div);
}
waterFull();
}
}
// 瀑布流方法
function waterFull() {
for (var i = 0; i < items.length; i++) {
if (i < column) {
items[i].style.left = (itemW + distence) * i + 'px';
arr[i] = items[i].offsetHeight;
// console.log(arr);
} else {
var minV = getMin(arr).minV;
var minI = getMin(arr).minI;
items[i].style.left = (itemW + distence) * minI + 'px';
items[i].style.top = minV + distence + 'px';
arr[minI] = minV + distence + items[i].offsetHeight;
}
}
}
// 获取数组的最小值以及索引
function getMin(arr) {
var obj = {};
obj.minV = arr[0];
obj.minI = 0;
for (var i = 1; i < arr.length; i++) {
if (obj.minV > arr[i]) {
obj.minV = arr[i];
obj.minI = i;
}
}
return obj;
}
}
</script>
效果
Δ~~~~Δ
ξ •ェ• ξ
ξ ~ ξ
ξ ξ
ξ “~～~～〇
ξ ξ
ξ ξ ξ~～~ξ ξ
ξ_ξξξ ξξξ_ξ
ヽ(´•ω•)ノ
| /
UU”
本文结束谢谢大家的阅读
