1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
<
head
>
4
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
5
<
title
>瀑布流沒有完成JS
</
title
>
6
</
head
>
7
8
9
<
style
type
="text/css"
>
10
*
{
margin
:
0
;
padding
:
0
;
margin
:
0 auto
;
}
11
#main
{
position
:
relative
;
}
12
.box
{
padding
:
15px 0 0 10px
;
float
:
left
;
display
:
inline
;
}
13
.pic
{
padding
:
10px
;
border
:
1px solid #ccc
;
border-radius
:
5px
;
box-shadow
:
0 0 2px #ccc
;
}
14
.pic img
{
width
:
165px
;
height
:
auto
;
}
15
</
style
>
16
<
body
>
17
18
<
div
id
="main"
>
19
20
<
div
class
="box"
>
21
<
div
class
="pic"
>
22
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
23
</
div
>
24
</
div
>
25
<
div
class
="box"
>
26
<
div
class
="pic"
>
27
<
img
src
="http://www.baidu.com/img/baidu_jgylogo3.gif"
/>
28
</
div
>
29
</
div
>
30
31
<
div
class
="box"
>
32
<
div
class
="pic"
>
33
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
34
</
div
>
35
</
div
>
36
37
<
div
class
="box"
>
38
<
div
class
="pic"
>
39
<
img
src
="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58"
/>
40
</
div
>
41
</
div
>
42
43
<
div
class
="box"
>
44
<
div
class
="pic"
>
45
<
img
src
="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7"
/>
46
</
div
>
47
</
div
>
48
49
<
div
class
="box"
>
50
<
div
class
="pic"
>
51
<
img
src
="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg"
/>
52
</
div
>
53
</
div
>
54
55
<
div
class
="box"
>
56
<
div
class
="pic"
>
57
<
img
src
="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2"
/>
58
</
div
>
59
</
div
>
60
61
<
div
class
="box"
>
62
<
div
class
="pic"
>
63
<
img
src
="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58"
/>
64
</
div
>
65
</
div
>
66
67
<
div
class
="box"
>
68
<
div
class
="pic"
>
69
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
70
</
div
>
71
</
div
>
72
73
<
div
class
="box"
>
74
<
div
class
="pic"
>
75
<
img
src
="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg"
/>
76
</
div
>
77
</
div
>
78
79
<
div
class
="box"
>
80
<
div
class
="pic"
>
81
<
img
src
="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053"
/>
82
</
div
>
83
</
div
>
84
85
<
div
class
="box"
>
86
<
div
class
="pic"
>
87
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
88
</
div
>
89
</
div
>
90
91
<
div
class
="box"
>
92
<
div
class
="pic"
>
93
<
img
src
="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"
/>
94
</
div
>
95
</
div
>
96
97
<
div
class
="box"
>
98
<
div
class
="pic"
>
99
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
100
</
div
>
101
</
div
>
102
103
104
105
<
div
class
="box"
>
106
<
div
class
="pic"
>
107
<
img
src
="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG"
/>
108
</
div
>
109
</
div
>
110
<
div
class
="box"
>
111
<
div
class
="pic"
>
112
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
113
</
div
>
114
</
div
>
115
<
div
class
="box"
>
116
<
div
class
="pic"
>
117
<
img
src
="http://www.baidu.com/img/baidu_jgylogo3.gif"
/>
118
</
div
>
119
</
div
>
120
121
<
div
class
="box"
>
122
<
div
class
="pic"
>
123
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
124
</
div
>
125
</
div
>
126
127
<
div
class
="box"
>
128
<
div
class
="pic"
>
129
<
img
src
="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58"
/>
130
</
div
>
131
</
div
>
132
133
<
div
class
="box"
>
134
<
div
class
="pic"
>
135
<
img
src
="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7"
/>
136
</
div
>
137
</
div
>
138
139
<
div
class
="box"
>
140
<
div
class
="pic"
>
141
<
img
src
="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg"
/>
142
</
div
>
143
</
div
>
144
145
<
div
class
="box"
>
146
<
div
class
="pic"
>
147
<
img
src
="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2"
/>
148
</
div
>
149
</
div
>
150
151
<
div
class
="box"
>
152
<
div
class
="pic"
>
153
<
img
src
="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58"
/>
154
</
div
>
155
</
div
>
156
157
<
div
class
="box"
>
158
<
div
class
="pic"
>
159
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
160
</
div
>
161
</
div
>
162
163
<
div
class
="box"
>
164
<
div
class
="pic"
>
165
<
img
src
="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg"
/>
166
</
div
>
167
</
div
>
168
169
<
div
class
="box"
>
170
<
div
class
="pic"
>
171
<
img
src
="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053"
/>
172
</
div
>
173
</
div
>
174
175
<
div
class
="box"
>
176
<
div
class
="pic"
>
177
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
178
</
div
>
179
</
div
>
180
181
<
div
class
="box"
>
182
<
div
class
="pic"
>
183
<
img
src
="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"
/>
184
</
div
>
185
</
div
>
186
187
<
div
class
="box"
>
188
<
div
class
="pic"
>
189
<
img
src
="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320"
/>
190
</
div
>
191
</
div
>
192
193
194
195
<
div
class
="box"
>
196
<
div
class
="pic"
>
197
<
img
src
="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG"
/>
198
</
div
>
199
</
div
>
200
201
<
div
style
="clear:both;"
>
</
div
>
202
203
</
div
>
204
</
body
>
205
</
html
>
206
207
<
script
type
="text/javascript"
>
208
209
window.onload
=
function
(){
210
waterfall(
"
main
"
,
"
box
"
);
211
//
頁面加載時的數據,如今是模擬,應該從後臺獲取AJAX
212
var
dataInt
=
{
"
data
"
:[{
"
src
"
:
"
1.jpg
"
},{
"
src
"
:
"
2.jpg
"
},{
"
src
"
:
"
3.jpg
"
},{
"
src
"
:
"
4.jpg
"
}]};
213
window.onscroll
=
function
(){
214
215
//
判斷最後一個元素到底部露出2分之1時,而後把新數據加載到頁面中
216
if
(checkScrollsilde){
217
//
遍歷要加載的數據,添加到頁面中
218
for
(
var
i
=
0
;i
<
dataInt.data.length;i
++
){
219
var
oParent
=
document.getElementById(
"
main
"
);
220
var
oBox
=
document.createElement(
"
div
"
);
221
oBox.className
=
"
box
"
;
222
oParent.appendChild(oBox);
223
var
oPic
=
document.createElement(
"
div
"
);
224
oPic.className
=
"
pic
"
;
225
oBox.appendChild(oPic);
226
var
oImg
=
document.createElement(
'
img
'
);
227
oImg.src
=
"
img/
"
+
dataInt.data[i].src;
228
oPic.appendChild(oImg);
229
}
230
waterfall(
"
main
"
,
"
box
"
);
//
添加一列時, 再些此次一列執行此函數
231
//
232
233
}
234
}
235
236
}
237
238
//
計算滾動條加載下一頁
239
function
checkScrollsilde(){
240
var
oParent
=
document.getElementById(
'
main
'
);
241
var
oBoxs
=
getByclass(oParent,box);
242
//
最後一個元素的當前的TOP值 和本的二分之一的
243
var
lastBoxH
=
oBoxs[oBoxs.length
-
1
].offsetTop
+
Math.floor((oBoxs.length
-
1
).offsetHeight
/
2);
244
//
滾動條的高度
245
var
scrollTop
=
document.body.scrollTop
||
document.documentElement.scrollTop;
246
//
可視區的高度
247
var
height
=
document.body.clientHeight
||
document.documentElement.clientHeight;
248
//
兩個元素作比較三元運算符
249
return
(lastBoxH
<
scrollTop
+
height)
?
true
:
false
;
250
}
251
252
253
254
/*
255
parent:父元素ID;
256
box: 要獲父元素下的因此元素的CLASS 類名
257
*/
258
259
function
waterfall(parent,box){
260
//
獲取父元素 id="main" 下的全部box
261
var
oParent
=
document.getElementById(parent);
262
var
oBoxs
=
getByClass(oParent,box) ;
//
用getByClass 方法,獲取 父元素下的全部要獲得的子元素。是一個數組
263
var
oBoxW
=
oBoxs[
0
].offsetWidth;
//
一個元素的寬度
264
var
cols
=
Math.floor(document.documentElement.clientWidth
/
oBoxW);
//
可視區中顯示的列數
265
oParent.style.cssText
=
'
width:
'
+
cols
*
oBoxW
+
'
px; margin:0 auto;
'
;
//
父元素添加樣式,寬
266
267
//
下面是計算第一列中高度最小的那個元素,而後把要添加的那個元素添加到最小元素的下面,
268
var
hArr
=
[];
269
for
(
var
i
=
0
;i
<
oBoxs.length;i
++
){
//
遍歷全部元素
270
if
(i
<
cols){
//
若是是第一列元素,則把此元素的高度添加到數組中,
271
hArr.push(oBoxs[i].offsetHeight);
272
}
else
{
//
不是第一列元素,則給此元素加上 相對定位,並加上,TOP,left 值 ,
273
var
minH
=
Math.min.apply(
null
,hArr);
274
//
alert(minH);
275
var
index
=
getMinhIndex(hArr,minH);
276
//
alert(oBoxW*index);
277
oBoxs[i].style.position
=
"
absolute
"
;
278
oBoxs[i].style.top
=
minH
+
'
px
'
;
279
oBoxs[i].style.left
=
oBoxW
*
index
+
'
px
'
;
280
}
281
hArr[index]
+=
oBoxs[i].offsetHeight;
//
添加一個元素的高度後,則把高度,再次放到數組中,從新計算。
282
}
283
//
alert(hArr)
284
}
285
286
287
//
獲取當前元素的索引值 arr:數組, val: 數組值名
288
function
getMinhIndex(arr,val){
289
for
(
var
i
in
arr){
290
if
(arr[i]
==
val){
291
return
i;
292
}
293
}
294
}
295
296
297
298
//
經過CLASS 獲取元素 Parent:父元素的ID, className: class類名
299
function
getByClass(Parent ,className){
300
var
boxArr
=
[];
//
用來存獲取因此CLASS的元素。
301
oElements
=
Parent.getElementsByTagName(
"
*
"
);
302
for
(
var
i
=
0
; i
<
oElements.length;i
++
){
303
if
(oElements[i].className
==
className){
304
boxArr.push(oElements[i])
305
}
306
}
307
return
boxArr;
//
返回到boxArr數組中
308
}
309
310
311
312
313
</
script
>