JS的瀑布流
JS瀑布流，大概就是像瀑布一样的流式布局，等宽不等高。大概思路就是每次下一行循环对比最低的一行，就把这个图定位到这列图片下去，以此类推，为了节省带宽，就是节流，在循环的最后一张图的时候，如果 screen的高度 + scroll的高度 > 最后一张图片高度的一半 + scroll高度 则进行再次循环。
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<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;
}
#main{
position: relative;
}
img{
width:180px;
}
.box{
width:200px;
padding:15px 0 0 15px;
float:left;
}
.pic{
padding:10px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><div class="pic"><img src="imgs/35.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/20.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/28.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/29.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/48.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/47.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/bb.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/sys.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/sy.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/yt.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/57.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/58.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/mty.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/140fxq.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/35.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/20.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/28.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/29.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/48.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/47.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/bb.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/sys.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/sy.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/yt.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/57.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/58.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/mty.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/140fxq.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/35.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/20.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/28.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/29.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/48.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/47.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/bb.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/sys.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/sy.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/yt.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/57.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/58.JPG"></div></div>
<div class="box"><div class="pic"><img src="imgs/mty.jpg"></div></div>
<div class="box"><div class="pic"><img src="imgs/140fxq.jpg"></div></div>
</div>
</body>
<script src="js/Underscore-min.js"></script>
<script src="js/MyFunc.js"></script>
<script>
var timer = null;
window.onload = function() {
waterFall('main', 'box');
window.onresize = function(){
clearInterval(timer);
timer = setInterval(function(){
waterFall('main','box');
},200)
}
window.onscroll = function () {
if (loadnewimage()) {
var dataarr = [
{src: '38.JPG'},
{src: '39.JPG'},
{src: '40.JPG'},
{src: '51.JPG'},
{src: 'mty.jpg'},
{src: 'qst.jpg'},
{src: 'jdc.jpg'}
];
for (var i = 0; i < dataarr.length; i++) {
var newbox = document.createElement('div');
$('main').appendChild(newbox);
newbox.className = 'box';
var newpic = document.createElement('div');
newbox.appendChild(newpic);
var newimg = document.createElement('img');
newbox.appendChild(newimg);
newimg.src = 'imgs/' + dataarr[i].src;
}
}
waterFall('main', 'box');
}
function waterFall(obj, box) {
var allbox = document.getElementsByClassName(box);
var main = document.getElementById(obj);
var boxWidth = allbox[0].offsetWidth;
var screenW = document.body.clientWidth || document.documentElement.clientWidth;
var cols = parseInt(screenW / boxWidth);
main.style.width = boxWidth * cols + 'px';
main.style.margin = '0 auto';
var heightarr = [];
for (var i = 0; i < allbox.length; i++) {
var boxheight = allbox[i].offsetHeight;
if (i < cols) {
heightarr.push(boxheight);
allbox[i].style='';
} else {
var minheight = _.min(heightarr);
var minboxindex = heightarr.indexOf(minheight);
allbox[i].style.position = 'absolute';
allbox[i].style.left = minboxindex * boxWidth + 'px';
allbox[i].style.top = minheight + 'px';
heightarr[minboxindex] += boxheight;
}
}
}
function loadnewimage() {
var allbox = document.getElementsByClassName('box');
var lastbox = allbox[allbox.length - 1];
var screenH = document.body.clientHeight || document.documentElement.clientHeight;
var scrollTop = scroll().top;
var lastboxheight = lastbox.offsetTop + lastbox.offsetHeight * 0.5;
return lastboxheight <= screenH + scrollTop;
}
}
</script>
</html>