瀑布流
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>
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>
