JS瀑布流效果

本篇内容实现类似百度图片的呈现功能，瀑布流+自动加载

index13.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>uvi</title>
  6      <link rel="stylesheet" href="style2.css" type="text/css">
  7      <script src="myjs.js"></script>
  8 </head>
  9 <body>
 10    <div id="container">
 11       <div class="box">
 12          <div class="box_img">
 13             <img src="img.jpg">
 14          </div>
 15       </div>
 16       <div class="box">
 17          <div class="box_img">
 18             <img src="img2.jpg">
 19          </div>
 20       </div>
 21       <div class="box">
 22          <div class="box_img">
 23             <img src="img3.jpg">
 24          </div>
 25       </div>
 26       <div class="box">
 27          <div class="box_img">
 28             <img src="img4.jpg">
 29          </div>
 30       </div>
 31       <div class="box">
 32          <div class="box_img">
 33             <img src="img5.jpg">
 34          </div>
 35       </div>
 36       <div class="box">
 37          <div class="box_img">
 38             <img src="img6.jpg">
 39          </div>
 40       </div>
 41       <div class="box">
 42          <div class="box_img">
 43             <img src="img7.jpg">
 44          </div>
 45        </div>
 46        <div class="box">
 47          <div class="box_img">
 48             <img src="img8.jpg">
 49          </div>
 50        </div>
 51        <div class="box">
 52          <div class="box_img">
 53             <img src="img9.jpg">
 54          </div>
 55        </div>
 56        <div class="box">
 57          <div class="box_img">
 58             <img src="img3.jpg">
 59          </div>
 60       </div>
 61       <div class="box">
 62          <div class="box_img">
 63             <img src="img4.jpg">
 64          </div>
 65       </div>
 66       <div class="box">
 67          <div class="box_img">
 68             <img src="img5.jpg">
 69          </div>
 70       </div>
 71       <div class="box">
 72          <div class="box_img">
 73             <img src="img6.jpg">
 74          </div>
 75       </div>
 76       <div class="box">
 77          <div class="box_img">
 78             <img src="img7.jpg">
 79          </div>
 80        </div>
 81        <div class="box">
 82          <div class="box_img">
 83             <img src="img8.jpg">
 84          </div>
 85        </div>
 86        <div class="box">
 87          <div class="box_img">
 88             <img src="img9.jpg">
 89          </div>
 90        </div>
 91        <div class="box">
 92          <div class="box_img">
 93             <img src="img3.jpg">
 94          </div>
 95       </div>
 96       <div class="box">
 97          <div class="box_img">
 98             <img src="img4.jpg">
 99          </div>
100       </div>
101       <div class="box">
102          <div class="box_img">
103             <img src="img5.jpg">
104          </div>
105       </div>
106       <div class="box">
107          <div class="box_img">
108             <img src="img6.jpg">
109          </div>
110       </div>
111       <div class="box">
112          <div class="box_img">
113             <img src="img7.jpg">
114          </div>
115        </div>
116        <div class="box">
117          <div class="box_img">
118             <img src="img8.jpg">
119          </div>
120        </div>
121        <div class="box">
122          <div class="box_img">
123             <img src="img9.jpg">
124          </div>
125        </div>
126          
127          
128       </div>
129    </div>
130    
131 </body>
132 </html>

css代码:

 1 *{
 2     margin:0px;
 3     padding:0px;
 4 }
 5 #container{
 6     position:relative;
 7     
 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 .box_img img{
20     1000px;
21     height:auto;
22 }

js代码

 1 window.onload = function(){
 2     imgLocation("container","box");
 3     var imgData={"data":[{"src":"img.jpg"},{"src":"img2.jpg"},{"src":"img3.jpg"}]};
 4     window.onscroll = function(){//监听滚动条
 5         if(checkFlag()){
 6             var cparent = document.getElementById("container");
 7             for(var i=0;i<imgData.data.length;i++){
 8                 var ccontent = document.createElement("div");
 9                 ccontent.className = "box";
10                 cparent.appendChild(ccontent);
11                 var boximg = document.createElement("div");
12                 boximg.className = "box_img";
13                 ccontent.appendChild(boximg);
14                 var img = document.createElement("img");
15                 img.src = imgData.data[i].src;
16                 boximg.appendChild(img);
17             }
18             imgLocation("container","box");
19         }
20     }
21 }
22 
23 function checkFlag(){
24     var cparent = document.getElementById("container");
25     var ccontent = getChildElement(cparent, "box");
26     var lastContentHeight = ccontent[ccontent.length-1].offsetTop;//获取最后一张照片距离顶部的高度
27     var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
28     var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
29     if(lastContentHeight<scrollTop+pageHeight){
30         return true;
31     }
32 
33 }
34 
35 function imgLocation(parent,content){
36     //将parent下的所有content全部取出
37     var cparent = document.getElementById(parent);
38     var ccontent = getChildElement(cparent,content);
39     var imgWidth = ccontent[0].offsetWidth;
40     var num =Math.floor(document.documentElement.clientWidth/imgWidth);
41     cparent.style.cssText = ""+imgWidth*num+"px;margin:0px auto";
42     
43     var BoxHeightArr = [];
44     for(var i = 0;i<ccontent.length;i++){
45         if(i<num){
46             BoxHeightArr[i] = ccontent[i].offsetHeight;
47         }else{
48             var minHeight = Math.min.apply(null,BoxHeightArr);//获得最小高度
49             var minIndex = getminheightLocation(BoxHeightArr,minHeight);
50             ccontent[i].style.position = "absolute";
51             ccontent[i].style.top = minHeight+"px";
52             ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
53             BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
54         }
55     }
56 }
57 
58 function getminheightLocation(BoxHeightArr,minHeight){
59     for(var i in BoxHeightArr){
60         if(BoxHeightArr[i]==minHeight){
61             return i;
62         }
63     }
64 }
65 
66 function getChildElement(parent,content){
67     var contentArr = [];
68     var allcontent = parent.getElementsByTagName("*");
69     for(var i =0;i<allcontent.length;i++){
70         if(allcontent[i].className==content){
71             contentArr.push(allcontent[i]);
72         }
73     }
74     return contentArr;
75 }