JavaScript实现瀑布流布局以及页面的自动加载

/**
 * Created by pc on 2015/8/28.
 */
window.onload = function(){
    imgLocation("contenter","box");
    var imgData = {"data":[{"src":"img12.jpeg"},{"src":"img13.jpg"},{"src":"img14.jpg"},{"src":"img15.jpeg"},{"src":"img16.jpeg"},{"src":"img17.jpeg"},{"src":"img18.jpeg"}]};
   /*不断加载新的内容*/
    window.onscroll = function(){
        if(checkFlag()){
            var parentid = document.getElementById("contenter");
            for(var i =0;i<imgData.data.length;i++){
                var childcontent = document.createElement("div");
                childcontent.className="box";
                parentid.appendChild(childcontent);
                var boximg = document.createElement("div");
                boximg.className = "box_img";
                childcontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src = "image/"+imgData.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("contenter","box");
        }

    }
}
/*确定图片摆放位置*/
function imgLocation(parent,content){

   /* 将父级元素下的content全部提取出来*/
    var parentid = document.getElementById(parent);
    var childelement = getChildElement(parentid,content);
    /*每张图片的宽度一样，所以我们只需要提取第一张图片的宽度*/
    var imgWidth = childelement[0].offsetWidth;
    /*确定每排放的列数*/
    var cols = Math.floor(document.documentElement.clientWidth/imgWidth);
    parentid.style.cssText = "width:"+imgWidth*cols+"px;margin:0 auto";
    /*确定一个存放图片高度的数组*/
    var imgHeightArr = [];
    for(var i=0;i<childelement.length;i++){
        if(i<cols){
            imgHeightArr[i]=childelement[i].offsetHeight;
        }else{
            /*找到每列当中最小的高度，将剩余的图片排列到下方*/
            var minHeight = Math.min.apply(null,imgHeightArr);
            var minIndex = getMinHeightLocation(imgHeightArr,minHeight);
            /*使用绝对定位的方法，确定图片的摆放位置*/
            childelement[i].style.position = "absolute";
            childelement[i].style.top = minHeight +"px";
            childelement[i].style.left = childelement[minIndex].offsetLeft + "px";
            imgHeightArr[minIndex] = imgHeightArr[minIndex]+childelement[i].offsetHeight;
        }
    }
}
/*得到最小高度图片的位置*/
function getMinHeightLocation(imgHeightArr,minHeight){
    for(var i in imgHeightArr){
        if(imgHeightArr[i] == minHeight){
            return i;
        }
    }
}
/*得到子级元素*/
function getChildElement(parent,content){
    var colArr=[];
    /*将所有元素提取出来，存放到一个数组当中*/
    var allchildelement = parent.getElementsByTagName("*");
    for(var i=0;i<allchildelement.length;i++){
        if(allchildelement[i].className ==content){
            colArr.push(allchildelement[i]);
        }
    }
    return colArr;
}
/*判断滚动条是否在页面最下端*/
function checkFlag(){
    var parentid = document.getElementById("contenter");
    var childelement = getChildElement(parentid,"box");
    /*以最下方的图片作为判断依据*/
    var lastElementHeight = childelement[childelement.length-1].offsetTop;
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
    if(lastElementHeight<scrollTop+pageHeight){
        return true;
    }

}

版权声明：本文为博主原创文章，未经博主允许不得转载。