JavaScript实现瀑布流效果

2017-02-22 本文已影响0人 McRay

在极客学院下载的js基础视频中学习到了用js实现瀑布流效果，然后自己总结了两个关键的点，一个是瀑布流效果的实现，另一个是下拉动态加载图片。

首先是HTML代码，如下：

<div id="container">
      <div class="box">
            <div class="imgBox">
               ![](images/1.jpg)
            </div>
      </div>
      ......
</div>

一个父容器contanier中多个放图片的盒子，至于为什么要用两个div来包含住img标签，是为了后面设置position属性而用的。

其次是CSS代码，如下：

*{margin:0px;padding:0px;}
#container{
    position:relative;
}
.box{
    float:left;
    padding:5px;
}
.imgBox{
    padding:5px;
    border:1px solid #CCCCCC;
    box-shadow: 0 0 5px #CCC;
    border-radius:5px;
}
.imgBox img{
    width:200px;
    height:auto;
}

这里为了好看，给图片设置了边框，内边距还有阴影的效果，HTML和CSS代码都比较简单，重点还是放在JS的实现上。

由于JS的代码比较多，我就一个个函数，按照顺序来分析，

function imgLocation(parent,content){
    //将parent下所有content取出
    var cparent=document.getElementById(parent);
    var ccontent = getChildElement(cparent,content);
    var imgWidth=ccontent[0].offsetWidth;//获得图片的宽度
    var cols=Math.floor(document.documentElement.clientWidth / imgWidth);//获得浏览器一行可以容纳的图片数
    cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";//通过style.cssText来改变元素的样式
    //确定位置
    var BoxHeightArr=[];
    //判断一排中的最小位置
    for(var i=0;i<ccontent.length;i++){
        if(i<cols){
            BoxHeightArr[i]=ccontent[i].offsetHeight;//只存入一行的高度
        } else{
            var minHeight=Math.min.apply(null,BoxHeightArr);
            var minIndex=getminheightLocation(BoxHeightArr,minHeight);
            ccontent[i].style.position="absolute";
            ccontent[i].style.top=minHeight+"px";
            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
            BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight;//改变原来最小高度图片的高度
        }
    }
}

第一个函数叫做imgLocation，顾名思义是用来给图片定位的，该函数会传入两个参数，一个是父元素，这里就是我们的container，另一个参数是内容，这里就是我们的imgBox。

首先我们要知道容器中有多少张图片，然后确定浏览器中，一行放多少张图片，其中用到了getChildElement函数来获得容器中图片的个数，具体代码如下：

//获得图片的个数
function getChildElement(parent,content){
    var contenArr=[];//定义一个数组contenArr
    var allContent = parent.getElementsByTagName("*");//获得父元素下的所有元素
    for(var i=0;i<allContent.length;i++){
        if(allContent[i].className==content){
            contenArr.push(allContent[i]);
        }
    }
    return contenArr;
}

确定好了一行放多少张图片之后，就要确定一排中高度最小的那张图片，以便确定超出列数之后的第一张图片的位置，这里面用了一个for循环，遍历容器中的图片，如果没有超出一行放图片的个数，就只存入一行的高度到数组BoxHeightArr中，当超出的时候，首先用Math.min.apply(null,BoxHeightArr);求出一行中图片的最小高度，然后通过getminheightLocation函数获得最小高度图片的位置索引，具体代码如下：

/得到高度最小图片的位置
function getminheightLocation(BoxHeightArr,minHeight){
    for(var i=0;i<BoxHeightArr.length;i++){
        if(BoxHeightArr[i]==minHeight){
            return i;
        }
    }
}

最后就将超出列数之后的第一张图片放到高度最小图片的下面，具体方法如下

            ccontent[i].style.position="absolute";
            ccontent[i].style.top=minHeight+"px";
            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";

值得注意的是，放完图片之后必须要更新高度最小图片的新高度，加上了新加入的图片高度。BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight

这样就完成了瀑布流的效果，接下来就要实现下拉动态加载图片，首先需要绑定一个监听滚动条的事件，具体代码如下：

//监听滚动条
window.onscroll=function(){
     if(checkFlag("container","box")){
        var cparent=document.getElementById("container");
        for(var i=0;i<imgData.data.length;i++){
            var ccontent=document.createElement("div");
            ccontent.className="box";
            cparent.appendChild(ccontent);
            var boximg=document.createElement("div");
            boximg.className="imgBox";
            ccontent.appendChild(boximg);
            var img=document.createElement("img");
            img.src="images/"+imgData.data[i].src;
            boximg.appendChild(img);
        }
        imgLocation("container","box");//对新加入的图片继续调用imgLocation函数
     }
}

首先通过checkFlag("container","box")判断，是否到达最后一张图片，具体代码如下：

window.onload=function(){
   imgLocation("container","box");
}
function checkFlag(parent,content){
    var cparent=document.getElementById(parent);
    var ccontent=getChildElement(cparent,content);
    var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//得到最后一张图片的顶部高度
    var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;//得到滚动的高度
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//得到屏幕的高度
    if(scrolltop+pageHeight>lastContentHeight){
        return true;
    }
}

lastContentHeight的值是最后一张图片距离顶部的高度，scrolltop的值是滚动的高度，就是当前显示页面之前隐藏的部分，pageHeight就是当前可见页面的高度，如果scrolltop加上pageHeight大于 lastContentHeight，就返回true，这个很好理解。

判断完了，到达最后一张图片之后，就要动态添加图片，这里用到了JSON数据格式，具体代码如下：

var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};

根据imgData对象中的data属性的个数，创建对应的类名为imgBox和Box的div标签，然后将标签插入到container容器中。最后只得注意的是，加载完了7张照片之后，要对新加入的图片继续调用imgLocation函数进行定位，否则不会有瀑布流的效果

JavaScript实现瀑布流效果

猜你喜欢

热点阅读