js图片瀑布流

浏览数：25 / 时间：2015年06月09日

一个简单的图片瀑布流

首先准备一个html文件,css用到很少,所以写在html里,还需要一个js文件及几张图片(分辨率随意)

html的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #container {
            position: relative;
        }

        .box_img {
            padding: 5px;
            float: left;
        }

        .box_img img {
            width: 300px;
            height: auto;
        }
    </style>
    <script src="js/test.js">
    </script>
</head>
<body>
<div id="container">
    <div class="box_img">
        <img src="1.jpg">
    </div>
    <div class="box_img">
        <img src="2.jpg">
    </div>
    <div class="box_img">
        <img src="3.jpg">
    </div>
    <div class="box_img">
        <img src="4.jpg">
    </div>
    <div class="box_img">
        <img src="5.jpg">
    </div>
    <div class="box_img">
        <img src="6.jpg">
    </div>
    <div class="box_img">
        <img src="7.jpg">
    </div>
    <div class="box_img">
        <img src="8.jpg">
    </div>
    <div class="box_img">
        <img src="9.jpg">
    </div>
    <div class="box_img">
        <img src="5.jpg">
    </div>
    <div class="box_img">
        <img src="6.jpg">
    </div>
    <div class="box_img">
        <img src="7.jpg">
    </div>
    <div class="box_img">
        <img src="8.jpg">
    </div>
    <div class="box_img">
        <img src="9.jpg">
    </div>
</div>
</body>

</html>

可以看出id为container的div包裹了许多class为box_img的div,而这些div中都包含有一张图片, 但是这样仅仅是图片的堆砌,每行图片之间有很大的留白,这时加入js后即可以实现瀑布流的效果

js的代码:

 1 /**
 2  * Created by earthgee on 2015/4/3.
 3  */
 4 window.onload=function(){
 5     imgLocation("container","box_img");
 6 
 7     var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
 8 
 9     window.onscroll= function () {
10          if(checkflag()){
11              //动态增加图片,实现自动加载
12              var cparent=document.getElementById("container");
13              for(var i=0;i<imgData.data.length;i++)
14              {
15                  var ccontent=document.createElement("div");
16                  ccontent.className="box_img";
17                  cparent.appendChild(ccontent);
18                  var img=document.createElement("img");
19                  img.src=imgData.data[i].src;
20                  ccontent.appendChild(img);
21              }
22              imgLocation("container","box_img");
23          }
24     }
25 }
26 
27 //此函数实现自动加载,通过检查当前页面最后一张图片距离顶端的距离,然后和页面高度及滚动距离作比较
28 function checkflag()
29 {
30     var cparent=document.getElementById("container");
31     var cconent=getChildElement(cparent,"box_img");
32     var lastContentHeight=cconent[cconent.length-1].offsetTop;
33     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
34     var pageHeight=document.documentElement.scrollTop||document.body.scrollTop;
35     if(lastContentHeight<scrollTop+pageHeight)
36     {
37         return true;
38     }
39 }
40 
41 //此函数实现瀑布流
42 function imgLocation(parent,content) {
43     var cparent=document.getElementById(parent);
44     var ccontent=getChildElement(cparent,content);   //ccontent为数组
45     var imgWidth=ccontent[0].offsetWidth;       //获得第一张图片的宽度(因为后面要在css中设置每张图片的宽度相同)
46     var cols=Math.floor(document.documentElement.clientWidth/imgWidth); //一行放多少张图片
47     cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";
48 
49     var boxHeightArr=[];
50     for(var i=0;i<ccontent.length;i++)
51     {
52         if(i<cols)     //boxHeightArr存放第一行图片的宽度
53         {
54             boxHeightArr[i]=ccontent[i].offsetHeight;
55 
56         }
57         else
58         {
59             var minheight=Math.min.apply(null,boxHeightArr);
60             var minIndex=getminheightLocation(boxHeightArr,minheight);    //找到第一行最短图片的索引
61             ccontent[i].style.position="absolute";
62             ccontent[i].style.top=minheight+"px";
63             ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
64             boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight;    //将每一张图片放到当前可以找到的最短图片下面,并增加长度
65         }
66     }
67 }
68 
69 function getminheightLocation(boxHeightArr,minHeight) {
70     for(var i in boxHeightArr){
71         if(boxHeightArr[i]==minHeight){
72             return i;
73         }
74     }
75 }
76 
77 
78 //获得parent的所有class为content的子元素,返回一个数组
79 function getChildElement(parent,content){
80     var contentArr=new Array();
81     var allcontent=parent.getElementsByTagName("*");  //匹配所有子元素
82     for(var i=0;i<allcontent.length;i++)
83     {
84         if(allcontent[i].className==content)
85         {
86             contentArr.push(allcontent[i]);
87         }
88     }
89     return contentArr;
90 }