瀑布流JS

window.onload = function() {
    imgLocation("container","box")
    var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
    window.onscroll = function () {
        if (checkFlag()) {
            var caparent = document.getElementById("container");
            for(var i = 0; i<imgData.data.length; i++){
                var ccontent = document.createElement("div");
                ccontent.className="box";
                caparent.appendChild(ccontent);
                var boximg = document.createElement("duv");
                boximg.className="box_img";
                ccontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src="img/"+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;
    var pageHeight = document.documentElement.clientHeight;
}

function imgLocation(parent,content) {
    var cparent = document.getElementById(parent); // 获取parent
    var ccontent = getChildElement(cparent,content);// 获取所有的content放在一个数组
    var imgWidth = ccontent[0].offsetWidth; // 获取图片的宽度
    var num = Math.floor(document.documentElement.clientWidth / imgWidth); // 获取一行的图片数量
    cparent.style.cssText = "width:" + imgWidth*num+"px;margin:0 auto"; // 定义宽度一定，两边居中

    var BoxHeightArr = [];  //图片的高度放在一个数组
    for(var i =0; i<ccontent.length; i++){ //i<盒子的总数
        if(i<num){                                                      //i<一行图片的数量
            BoxHeightArr[i]=ccontent[i].offsetHeight;                   //把一行图片的高度放在数组里
        }else {                                                         //剩余的图片用一下的方式来摆放位置
            var minheight = Math.min.apply(null,BoxHeightArr);         //获得刚才box数组中最矮的图片高度
            var minIndex = getminheightLocation(BoxHeightArr,minheight);  // 获得box数组中最矮的盒子的位置是第几个
            ccontent[i].style.position = "absolute";                       //剩下的照片绝对位置
            ccontent[i].style.top = minheight+"px";                        // 剩下的照片高度
            ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";   // 剩下的照片摆放居左从最box数组中最矮的高度的宽度开始
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight; //重新定义最矮的图片位置 B[min]= b[min]+ C[1].height ;
        }
    }
}

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


function getChildElement(parent,content){
    var contentArr = [];
    var allcontent = parent.getElementsByTagName("*");
    for(var i =0;i<allcontent.length; i++){
        if(allcontent[i].className==content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}