js图片瀑布流效果

要实现图片瀑布流效果，首先得准备几张图片。

html的部分比较简单就是将图片加载到浏览器就可以了

代码如下（注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pool</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
    <script src="js/app.js"></script>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="1.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="1.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
    </div>

</body>
</html>

style2.css代码如下：

*{
margin: 0px;/*外边距*/
padding: 0px; /*内边距   */
}
#container{
    position: relative;/*相对布局*/
}
.box{
    padding: 5px;
    float: left;/*向左浮动*/

}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;/*边框*/
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
}
.box_img img{
    width: 150px;
    height: auto;
}

app.js代码如下（灵魂）：

window.onload = function (){
imgLocation("container","box");
    //准备的照片
    var imgData = {"data":[{"src":"10.jpg"},{"src":"9.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};
    window.onscroll=function(){
        //鼠标滑轮一滑就加载图片实际上就是将图片添加到html中
        //就是添加下面东西到html中，src变化
        /*<div class="box">
            <div class="box_img">
            <img src="8.jpg">
            </div>
            </div>
          */
        if(checkOut()){
            //因为html是树结构的
            var cparent=document.getElementById("container");

            for(var i=0;i<imgData.data.length;i++){
                //分别创建2个div和一个img
                var boxDiv = document.createElement("div");
                var boxImgDiv = document.createElement("div");
                var Img = document.createElement("img");

                //给创建的节点添加与之前再html直接写出的图片区域一样的属性
                boxDiv.className = "box";
                boxImgDiv.className = "box_img";
                Img.src = imgData.data[i].src;

                //确定添加节点的位置（你创建的节点的父母是谁）
                cparent.appendChild(boxDiv);
                boxDiv.appendChild(boxImgDiv);
                boxImgDiv.appendChild(Img);

            }
            //按照之前的照片排列规则
            imgLocation("container","box");
        }
    }
}

function checkOut() {

    var ccontent=[];
    var cparent=document.getElementById("container");
    ccontent=getChildElement(cparent,"box");
    var lastTopheight= ccontent[ccontent.length-1].offsetTop;//最后一张照片距离最上面的高度（大于液面高度）
    var scrollTop = document.documentElement.scrollTop;//滚轮滑动的长度
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;//页面高度
    //console.log(lastTopheight+":"+scrollTop+":"+pageHeight);
    //当滑到最后一张图片准备开始加载准备的图片
    //判定条件就是页面高度加上鼠标滑轮滑动大于最后一张图片距离最上面的高度（等于就是刚准备刷到最后一张照片）
    if(pageHeight+scrollTop>lastTopheight){
        return true;
    }
}

function imgLocation(parent,content){
    var cparent=document.getElementById(parent);//先获得的container节点
    var ccontent=getChildElement(cparent,content);
    //console.log(ccontent);
    var imgWidth=ccontent[0].offsetWidth;
    var WindowWidth=document.documentElement.clientWidth;
    var num=Math.floor(WindowWidth/imgWidth);//浏览器一横行所放图片的数量
    cparent.style.cssText = "width:"+Math.floor(num*imgWidth)+"px;margin:0 auto";
    // console.log(num);
    // console.log(ccontent.length);
    var boxHeightArr=[];

    for(var i=0;i<ccontent.length;i++){
        if(i<num){
        boxHeightArr[i]=ccontent[i].offsetHeight;
        //console.log(boxHeightArr[i]);
        }else{
            var minHeight= Math.min.apply(null,boxHeightArr);//找到数组最小的高度
            // console.log(minHeight);
            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;
        }
    }
}

function getChildElement(parent,content) {
    var allContent=[];
    allContent=parent.childNodes;//parent.getElementsByTagName("*");(注释掉的是视频中讲的)
    var contentArr = new Array();
    for(var i=0;i<allContent.length;i++){
        if(allContent[i].className==content){
            contentArr.push(allContent[i]);
        }
    }
    return contentArr;
}

function getminHeightLocation(boxHeightArr,minHeight){
    for(var i=0;i<boxHeightArr.length;i++){
        if(boxHeightArr[i]==minHeight){
            return i;
        }
    }
}

效果展示（滑轮向下滑永远滑不到尽头）：