瀑布流佈局

時間 2019-11-30
原文原文鏈接
用js實現瀑布流佈局以及經過模擬的數據加載圖片，已標記註釋javascript
效果如圖：css
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>瀑布流佈局-JS實現</title>
  6 </head>
  7 <style type="text/css">
  8     *{
  9         margin: 0;
 10         padding: 0;
 11     }
 12     #main{
 13         position: relative;/*總體相對定位，由於每一個小圖片盒子的位置是經過計算再由絕對定位放置，是須要相對於main盒子*/
 14     }
 15     .box{
 16         padding: 15px 0 0 15px;/*padding爲內邊距，後面js獲取的高度包括padding的距離*/
 17         float: left;
 18     }
 19     .pic{
 20         padding: 10px;
 21         border: 1px solid #ccc;
 22         border-radius: 5px;
 23         box-shadow: 0 0 5px #ccc;
 24     }
 25     .pic img{
 26         width: 165px;
 27         height: auto;
 28     }
 29 </style>
 30 <script type="text/javascript">
 31     window.onload=function(){
 32         var oParent=document.getElementById("main");
 33         var oBoxs=oParent.getElementsByClassName("box");
 34        waterfall('main','box');//調用瀑布佈局的函數
 35         var dataInt={"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]}//模擬出要加載的圖片
 36         window.onscroll=function(){
 37             if(checkscrollSlide()){//若是調用函數的返回結果爲true
 38                 //將數據塊渲染到當前頁面底部
 39                 for(var i=0;i<dataInt.data.length;i++){//dataInt對象的data屬性的長度
 40                     var oBox=document.createElement('div');
 41                     oBox.className='box';
 42                     oParent.appendChild(oBox);//添加到父元素的最後
 43                     var oPic=document.createElement('div');
 44                     oPic.className='pic';
 45                     oBox.appendChild(oPic);
 46                     var oImg=document.createElement('img');
 47                     oImg.src="img/"+dataInt.data[i].src;
 48                     oPic.appendChild(oImg);
 49                 }
 50                waterfall('main','box');
 51             };
 52         }
 53         function waterfall(parent,box){
 54             var oParent=document.getElementById(parent);
 55             var oBoxs=oParent.getElementsByClassName(box);
 56             var oBoxW=oBoxs[0].offsetWidth;//計算每一個box的寬度
 57             //計算整個頁面顯示的列數（頁面寬/box的寬）
 58             var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
 59             //設置main的寬,居中
 60             oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';
 61             var hArr=[];//存放每一列高度的數組
 62             for(var i=0;i<oBoxs.length;i++){
 63                 if(i<cols){
 64                     hArr.push(oBoxs[i].offsetHeight);//將第一行的各個高度加到數組中
 65                 }else{
 66                     var minH=Math.min.apply(null,hArr);//apply方法能夠改變數組的指向,由於Math.min方法不支持數組
 67                     var index=getMinhIndex(hArr,minH);
 68                     oBoxs[i].style.position='absolute';
 69                     oBoxs[i].style.top=minH+'px';
 70                     oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
 71                     hArr[index]+=oBoxs[i].offsetHeight;
 72                 }
 73             }
 74         }
 75         function getMinhIndex(arr,val){
 76             for(var i in arr){
 77                 if(arr[i]==val){
 78                     return i;
 79                 }
 80 
 81             }
 82         }
 83         //檢測是否具有了滾動條加載數據塊的條件
 84         function checkscrollSlide(){
 85             //最後一個盒子的距頂部的高度加上自身高度的一半
 86             var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+ Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
 87             //頁面滾走的距離
 88             var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
 89             //當前瀏覽器窗口可視區域高度
 90             var height=document.body.clientHeight||document.documentElement.clientHeight;
 91             return (lastBoxH<scrollTop+height) ? true : false;
 92         }
 93 }
 94 
 95 
 96 </script>
 97 <body>
 98 <div id="main">
 99     <div class="box">
100     <div class="pic">
101         <img src="img/0.jpg" />
102     </div>
103 </div>
104     <div class="box">
105         <div class="pic">
106             <img src="img/1.jpg" />
107         </div>
108     </div>
109     <div class="box">
110         <div class="pic">
111             <img src="img/2.jpg" />
112         </div>
113     </div>
114     <div class="box">
115         <div class="pic">
116             <img src="img/3.jpg" />
117         </div>
118     </div>
119     <div class="box">
120         <div class="pic">
121             <img src="img/4.jpg" />
122         </div>
123     </div>
124     <div class="box">
125         <div class="pic">
126             <img src="img/5.jpg" />
127         </div>
128     </div>
129     <div class="box">
130         <div class="pic">
131             <img src="img/6.jpg" />
132         </div>
133     </div>
134     <div class="box">
135         <div class="pic">
136             <img src="img/7.jpg" />
137         </div>
138     </div>
139     <div class="box">
140         <div class="pic">
141             <img src="img/8.jpg" />
142         </div>
143     </div>
144     <div class="box">
145         <div class="pic">
146             <img src="img/9.jpg" />
147         </div>
148     </div>
149     <div class="box">
150         <div class="pic">
151             <img src="img/10.jpg" />
152         </div>
153     </div>
154     <div class="box">
155         <div class="pic">
156             <img src="img/11.jpg" />
157         </div>
158     </div>
159     <div class="box">
160         <div class="pic">
161             <img src="img/12.jpg" />
162         </div>
163     </div>
164     <div class="box">
165         <div class="pic">
166             <img src="img/13.jpg" />
167         </div>
168     </div>
169     <div class="box">
170         <div class="pic">
171             <img src="img/14.jpg" />
172         </div>
173     </div>
174     <div class="box">
175         <div class="pic">
176             <img src="img/15.jpg" />
177         </div>
178     </div>
179     <div class="box">
180         <div class="pic">
181             <img src="img/16.jpg" />
182         </div>
183     </div>
184     <div class="box">
185         <div class="pic">
186             <img src="img/17.jpg" />
187         </div>
188     </div>
189     <div class="box">
190         <div class="pic">
191             <img src="img/18.jpg" />
192         </div>
193     </div>
194     <div class="box">
195         <div class="pic">
196             <img src="img/19.jpg" />
197         </div>
198     </div>
199     <div class="box">
200         <div class="pic">
201             <img src="img/20.jpg" />
202         </div>
203     </div>
204     <div class="box">
205         <div class="pic">
206             <img src="img/21.jpg" />
207         </div>
208     </div>
209     <div class="box">
210         <div class="pic">
211             <img src="img/22.jpg" />
212         </div>
213     </div>
214 
215 </div>
216 </body>
217 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。