瀑布流

  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 >