-
Notifications
You must be signed in to change notification settings - Fork 96
/
Copy pathwaterfull.html
124 lines (119 loc) · 3.56 KB
/
waterfull.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
min-height: calc(100vh + 500px);
}
#container {
position: relative;
margin: 0 auto;
}
.box {
padding: 15px 0 0 15px;
float: left;
opacity: 0;
}
.boxDisplay {
opacity: 1;
transition: opacity 2s;
}
.pic {
padding: 10px;
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: 0 0 5px #CCC;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script>
var imgsNumber = 0;
function preload() {
var container = document.getElementById("container");
var newBox, newPic, newImg;
for(let i = 0; i < 20; i++ ) {
newBox = document.createElement("div");
newBox.className = "box";
container.appendChild(newBox);
newPic = document.createElement("div");
newPic.className = "pic";
newBox.appendChild(newPic);
newImg = document.createElement("img");
if(imgsNumber > 9) {
newImg.src = "http://cued.xunlei.com/demos/publ/img/P_0" + imgsNumber + ".jpg";
} else {
newImg.src = "http://cued.xunlei.com/demos/publ/img/P_00" + imgsNumber + ".jpg";
}
newPic.appendChild(newImg);
imgsNumber++;
setTimeout(waterFull, 200);
}
}
function waterFull() {
var boxes = document.getElementsByClassName('box');
var box_width = document.getElementsByClassName('box')[0].offsetWidth;
var w_width = document.body.clientWidth;
var column = Math.floor(w_width/box_width); //计算得到图片列数
document.getElementById('container').style.width = column * box_width + "px";
var heightArr = [];
for(var i = 0; i < boxes.length; i++ ) {
if(i < column) {
boxes[i].style.position = null;
heightArr.push(boxes[i].offsetHeight); //前列数张图片放入高度数组，也不设置布局
} else {
var min_height = Math.min.apply(Math,heightArr); //求得最小高度
var min_height_index = heightArr.indexOf(min_height); //求高度最小的列的列号
boxes[i].style.position = "absolute";
boxes[i].style.top = min_height + "px";
boxes[i].style.left = boxes[min_height_index].offsetLeft + "px";
heightArr[min_height_index] += boxes[i].offsetHeight; //下一张图片布局到此列且加上高度
}
boxes[i].className = "box boxDisplay";
}
}
window.onscroll = function() {
if(check_onload() && imgsNumber < 100) {
for(let i = 0 ; i < 5 ; i++ ) {
newBox = document.createElement("div");
newBox.className = "box";
container.appendChild(newBox);
newPic = document.createElement("div");
newPic.className = "pic";
newBox.appendChild(newPic);
newImg = document.createElement("img");
if(imgsNumber < 100) {
newImg.src = "http://cued.xunlei.com/demos/publ/img/P_0" + imgsNumber + ".jpg";
} else {
delete newBox;
break;
}
newPic.appendChild(newImg);
imgsNumber++;
setTimeout(waterFull, 200); //每次加载重新执行waterFull
}
}
}
function check_onload() {
var boxes = document.getElementsByClassName("box");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //页面圈走的高度
var clientHeight = document.documentElement.clientHeight||document.body.clientHeight; //客户端窗口高度
var lastBoxOffsetTop = boxes[boxes.length-1].offsetTop + boxes[boxes.length-1].offsetHeight / 2;
//最后一个盒子设置的top的距离 + 盒子高度的一半
return (lastBoxOffsetTop < scrollTop + clientHeight) ? true : false ;
}
window.onload = preload();
</script>
</html>