原生JS实现瀑布流效果

经过两天前B站在极客学院学习JS主要动态瀑布流效应:HTML+CSS控制方式JS实现全球瀑布流方式和访问自定义JSON字符串,实现无限加载的图像;

HTML代码部分:

CSS代码部分

@charset "UTF-8";
/**
 * 
 * @authors zhanghe-V (807597850@qq.com)
 * @date    2018-06-11 20:12:16
 * @version $1.0$
 */
*{
    padding: 0px;
    margin: 0px;
}
#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.boximg{
    padding: 5px;
    border: 1px solid #595959FF;
    box-shadow: 0 0 5px #ccc; /*阴影效果*/
    border-radius: 5px;/*圆角效果*/ 
}
.boximg img{
    width: 200px;
    height: auto;
}

JS代码部分

/**
 * 
 * @authors zhanghe-V (807597850@qq.com)
 * @date    2018-06-11 20:23:17
 * @version $1.0$
 */
window.onload = function(){
    imgLocation("container","box")

    var imgData = {"data":[
                            {"src":"11.jpg"},
                            {"src":"12.jpg"},
                            {"src":"13.jpg"},
                            {"src":"14.jpg"},
                            {"src":"15.jpg"},
                            {"src":"16.jpg"},
                            {"src":"17.jpg"},
                            {"src":"18.jpg"},
                            {"src":"19.jpg"},
                            {"src":"20.jpg"},
                            {"src":"21.jpg"},
                            {"src":"22.jpg"},]}

    window.onscroll = function(){
        if (checkFlag()) {
            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="boximg";
                ccontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src = "images/"+imgData.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("container","box");
        }       
    }
}

function checkFlag(){
    var cparent = document.getElementById("container");
    var  ccontent = getChildElement(cparent,"box");
    var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
    if (lastContentHeight<(scrollTop+pageHeight)) {
        return true;
    }
    console.log(lastContentHeight+","+scrollTop+","+pageHeight);
}

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);
    //设置父容器container宽度和样式设置为中心
    cparent.style.cssText = "width:"+imgwidth*cols+"px;margin:0 auto";

    var boxHeightArr = [];
    for (var i = 0; i < ccontent.length; i++) {
        if (i