用js实现图片自动加载的瀑布流效果

　　向下滑动网页的时候能够自动加载图片并显示。

 先看一下效果：http://39.105.101.122/myhtml/JAVASCRIPT/waterfall/waterfall.html

　　盛放图片的盒子模型如下：

　　　　<div class="box">
            <div class="box_img">
                <img src="Img/8.jpg">
            </div>
        </div>

　　设置img-width为150px，然后box_img添加内边距和阴影效果，box的外边距为0，添加内边距。盒子的宽度是由img-width和边距撑开的。也就是说盒子之间是没有间距的，但是盒子内部有一些边距的效果。这样在js设置位置的时候就不用考虑边距问题，直接调用box的宽度就可以了。

　　设置盛放所有box的div的position为relative，这样在设置top值或是left值的时候，就不用考虑最外层的margin属性。

　　放置图片的位置：获得第一行图片的高度并且存放在数组里面，接下来的图片设置position为absolute，放置在高度最小的图片的下面，然后设置top和left，并且把数组的最小值加上新放置的图片的高度。也就是说HTML里面原始放置的图片除了第一行以外，其他的图片都是在js里面又重新定位的。

　　当滑动页面到底部的时候触发事件函数，紧接着放置一些图片，这样保证图片的无限加载。

　　HTML文件：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="waterfall.css" type="text/css">
  7     <script src="waterfall.js"></script>
  8 </head>
  9 <body>
 10     <div id="content">
 11         <div class="box">
 12             <div class="box_img">
 13                 <img src="Img/1.jpg">
 14             </div>
 15         </div>
 16         <div class="box">
 17             <div class="box_img">
 18                 <img src="Img/2.jpg">
 19             </div>
 20         </div>
 21         <div class="box">
 22             <div class="box_img">
 23                 <img src="Img/3.jpg">
 24             </div>
 25         </div>
 26         <div class="box">
 27             <div class="box_img">
 28                 <img src="Img/4.jpg">
 29             </div>
 30         </div>
 31         <div class="box">
 32             <div class="box_img">
 33                 <img src="Img/5.jpg">
 34             </div>
 35         </div>
 36         <div class="box">
 37             <div class="box_img">
 38                 <img src="Img/6.jpg">
 39             </div>
 40         </div>
 41         <div class="box">
 42             <div class="box_img">
 43                 <img src="Img/7.jpg">
 44             </div>
 45         </div>
 46         <div class="box">
 47             <div class="box_img">
 48                 <img src="Img/8.jpg">
 49             </div>
 50         </div>
 51         <div class="box">
 52             <div class="box_img">
 53                 <img src="Img/9.jpg">
 54             </div>
 55         </div>
 56         <div class="box" >
 57             <div class="box_img">
 58                 <img src="Img/10.jpg">
 59             </div>
 60         </div>
 61         <div class="box">
 62             <div class="box_img">
 63                 <img src="Img/1.jpg">
 64             </div>
 65         </div>
 66         <div class="box">
 67             <div class="box_img">
 68                 <img src="Img/2.jpg">
 69             </div>
 70         </div>
 71         <div class="box">
 72             <div class="box_img">
 73                 <img src="Img/3.jpg">
 74             </div>
 75         </div>
 76         <div class="box">
 77             <div class="box_img">
 78                 <img src="Img/4.jpg">
 79             </div>
 80         </div>
 81         <div class="box">
 82             <div class="box_img">
 83                 <img src="Img/5.jpg">
 84             </div>
 85         </div>
 86         <div class="box">
 87             <div class="box_img">
 88                 <img src="Img/6.jpg">
 89             </div>
 90         </div>
 91         <div class="box">
 92             <div class="box_img">
 93                 <img src="Img/7.jpg">
 94             </div>
 95         </div>
 96         <div class="box">
 97             <div class="box_img">
 98                 <img src="Img/8.jpg">
 99             </div>
100         </div>
101         <div class="box">
102             <div class="box_img">
103                 <img src="Img/9.jpg">
104             </div>
105         </div>
106         <div class="box" >
107             <div class="box_img">
108                 <img src="Img/10.jpg">
109             </div>
110         </div>
111         <div class="box">
112             <div class="box_img">
113                 <img src="Img/1.jpg">
114             </div>
115         </div>
116         <div class="box">
117             <div class="box_img">
118                 <img src="Img/2.jpg">
119             </div>
120         </div>
121         <div class="box">
122             <div class="box_img">
123                 <img src="Img/3.jpg">
124             </div>
125         </div>
126         <div class="box">
127             <div class="box_img">
128                 <img src="Img/4.jpg">
129             </div>
130         </div>
131         <div class="box">
132             <div class="box_img">
133                 <img src="Img/5.jpg">
134             </div>
135         </div>
136         <div class="box">
137             <div class="box_img">
138                 <img src="Img/6.jpg">
139             </div>
140         </div>
141         <div class="box">
142             <div class="box_img">
143                 <img src="Img/7.jpg">
144             </div>
145         </div>
146         <div class="box">
147             <div class="box_img">
148                 <img src="Img/8.jpg">
149             </div>
150         </div>
151         <div class="box">
152             <div class="box_img">
153                 <img src="Img/9.jpg">
154             </div>
155         </div>
156         <div class="box" >
157             <div class="box_img">
158                 <img src="Img/10.jpg">
159             </div>
160         </div>
161         <div class="box">
162             <div class="box_img">
163                 <img src="Img/1.jpg">
164             </div>
165         </div>
166         <div class="box">
167             <div class="box_img">
168                 <img src="Img/2.jpg">
169             </div>
170         </div>
171         <div class="box">
172             <div class="box_img">
173                 <img src="Img/3.jpg">
174             </div>
175         </div>
176         <div class="box">
177             <div class="box_img">
178                 <img src="Img/4.jpg">
179             </div>
180         </div>
181         <div class="box">
182             <div class="box_img">
183                 <img src="Img/5.jpg">
184             </div>
185         </div>
186         <div class="box">
187             <div class="box_img">
188                 <img src="Img/6.jpg">
189             </div>
190         </div>
191         <div class="box">
192             <div class="box_img">
193                 <img src="Img/7.jpg">
194             </div>
195         </div>
196         <div class="box">
197             <div class="box_img">
198                 <img src="Img/8.jpg">
199             </div>
200         </div>
201         <div class="box">
202             <div class="box_img">
203                 <img src="Img/9.jpg">
204             </div>
205         </div>
206         <div class="box" >
207             <div class="box_img">
208                 <img src="Img/10.jpg">
209             </div>
210         </div>
211         <div class="box">
212             <div class="box_img">
213                 <img src="Img/1.jpg">
214             </div>
215         </div>
216         <div class="box">
217             <div class="box_img">
218                 <img src="Img/2.jpg">
219             </div>
220         </div>
221         <div class="box">
222             <div class="box_img">
223                 <img src="Img/3.jpg">
224             </div>
225         </div>
226         <div class="box">
227             <div class="box_img">
228                 <img src="Img/4.jpg">
229             </div>
230         </div>
231         <div class="box">
232             <div class="box_img">
233                 <img src="Img/5.jpg">
234             </div>
235         </div>
236         <div class="box">
237             <div class="box_img">
238                 <img src="Img/6.jpg">
239             </div>
240         </div>
241         <div class="box">
242             <div class="box_img">
243                 <img src="Img/7.jpg">
244             </div>
245         </div>
246         <div class="box">
247             <div class="box_img">
248                 <img src="Img/8.jpg">
249             </div>
250         </div>
251         <div class="box">
252             <div class="box_img">
253                 <img src="Img/9.jpg">
254             </div>
255         </div>
256         <div class="box" >
257             <div class="box_img">
258                 <img src="Img/10.jpg">
259             </div>
260         </div>
261     </div>
262 </body>
263 </html>
View Code

　　CSS文件：

 1 *{
 2     margin: 0;
 3     padding:0;
 4 }
 5 #content{
 6     position: relative;
 7     background-color: #006000;
 8 }
 9 .box{
10     padding: 5px;
11     float: left;
12 }
13 .box_img{
14     padding: 5px;
15     border: 1px solid #cccccc;
16     box-shadow: 0 0 5px #cccccc;
17     border-radius: 5px;
18 }
19 img{
20     width: 150px;
21     height: auto;
22 }
View Code

　　js文件：

　　Math.floor()函数能够向下取整。

　　Math.min.apply(null,heightArr);函数能获得heightArr数组的最小值。

　　window.onscroll=function(){}；滑动页面的时候触发这个函数。

　　document.documentElement.clientHeight；浏览器显示出来的高度。

　　document.documentElement.scrollTop；滑动的距离。

/**
 * Created by asua on 2016/4/9.
 */
window.onload=function(){
    imgLocation("content","box");
    var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}
    window.onscroll=function(){
        if(checkFlag()){
            for(var i=0;i<lodeImage.Date.length;i++){
                var box=document.createElement("div");
                box.className="box";
                var cparent=document.getElementById("content");
                cparent.appendChild(box);
                var box_img=document.createElement("div");
                box_img.className="box_img";
                box.appendChild(box_img);
                var img=document.createElement("img");
                img.src="Img/"+lodeImage.Date[i].src;
                box_img.appendChild(img);
            }
            imgLocation("content","box");
        }
    }
}
function checkFlag(){
    var cparent=document.getElementById("content");
    var ccontent=getChildElement(cparent,"box");
    var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
    var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
    console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
    if(lastContentHeight<scrollHeight+pageHeight){
        return true;
    }
}
function imgLocation(parent,child){
    var cparent=document.getElementById(parent);
    var ccontent=getChildElement(cparent,child);
    var imgwidth=ccontent[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
    cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
    var heightArr=[];
    for(var i=0;i<ccontent.length;i++){
        if(i<cols){
            heightArr.push(ccontent[i].offsetHeight);
        }else{
            var minHeight=Math.min.apply(null,heightArr);
            var minIndex=getMinIndex(heightArr,minHeight);
            ccontent[i].style.position="absolute";
            ccontent[i].style.top=minHeight+"px";
            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
            heightArr[minIndex]+=ccontent[i].offsetHeight;
        }
    }
}
function getMinIndex(heightArr,minHeight){
    for(var i=0;i<heightArr.length;i++){
        if(heightArr[i]==minHeight){
            return i;
        }
    }
}
function getChildElement(parent,content){
    var contentArr=[];
    var allcontent=parent.getElementsByTagName("*");
    for(var i=0;i<allcontent.length;i++){
        if(allcontent[i].className==content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}
View Code

　　效果：

posted on 2016-04-10 16:57  辉子t1  阅读(2675)  评论(0)  编辑  收藏  举报

导航