JS实现瀑布流效果

// //第一步目的固定屏幕的宽度，设置摆放图片的个数
// window.onload = function ()//加载函数，目的为了获得屏幕有多少图片
// {
//     imgLoaction("container","box");
// }
// function imgLoaction(parent,content)//通过发现父级空间里的子集空间有多少个div来判断图片个数
// {
//     //将parent下的所有内容全部取出
//     var cparent = document.getElementById(parent);//得到父级空间
//     var ccontent =getChildElement(cparent,content);//定义一个对象承载父级空间的所有内容
//     // console.log(ccontent);//打印出来看有多少内容
//     var imgWidth = ccontent[0].offsetWidth;//得到每个内容的宽度
//     var cols = Math.floor(document.documentElement.clientWidth / imgWidth)//整个屏幕的宽度/图片宽度，再令他为整数得到一行的个数
//     cparent.style.cssText="width:"+imgWidth*cols+"px;margin: 0 auto"//设置父级空间的内容，令其的整体的宽度为固定的值
// }
// function getChildElement(parent,content) //父级空间内控件比较多需要储存，我定义了10个
// {
//     var contentArr=[];//定义一个数组把所有东西存储在一个对象中
//     var allcontent =parent.getElementsByTagName("*");//通过父级空间得到子集空间的所有东西
//     for(var i=0;i<allcontent.length;i++)//通过for循环把它放在一个数组当中
//     {
//         if(allcontent[i].className==content)//如果取出的东西与内容也就是box相等
//         {
//             contentArr.push(allcontent[i]);//将其通过push追加存储在数组中
//         }
//     }
//     return contentArr;
// }









// //第二步目的判断第一排每一个的高度，使第二排的图片插入进高度最低的地方
// window.onload = function ()
// {
//     imgLoaction("container","box");
// }
// function imgLoaction(parent,content)
// {
//     //将parent下的所有内容全部取出
//     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";
//
//     var BoxHeightArr=[];//定义数组承载盒子中第一排模块的高度
//     for(var i = 0;i<ccontent.length;i++)//循环得到每张图片的高度
//     {
//        if(i<cols)//做出判断目的为了只得到第一排的高度
//        {
//            BoxHeightArr[i] = ccontent[i].offsetHeight;//每得到一张图片的高度将它存储在数组中
//            // console.log(BoxHeightArr[i]);//在控制台打印出所有的高度
//        }
//        else
//            {
//                var minheight = Math.min.apply(null,BoxHeightArr);//得到第一排图片高度的最小值，用数组的形式的情况下，为例子所示
//                // console.log(minheight);//在控制台打印最小高度
//                ccontent[i].style.position = "absolute";//设置图片格式为绝对布局
//                ccontent[i].style.top = minheight + "px";//设置图片距上的位置
//                var minIndex = getminheight(BoxHeightArr,minheight)//声明参数为存储最小高度的位置
//                ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";//设置图片据左的位置为最小图片的位置
//                BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;//加载了一个图片后，该位置就其高度现在不是最小高度的位置，它的高度为它们的和
//            }
//     }
// }
// function getminheight(BoxHeightArr,minHeight) //得到最小高度的位置，参数为数组，和最小高度
// {
//     for(var i in BoxHeightArr)//遍历看哪个参数是最小的高度
//     {
//         if(minHeight==BoxHeightArr[i])
//         {
//             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;
// }







//第三步目的让图片滚动滚动条可以不停的加载图片，如百度图片下拉不停加载
window.onload = function ()
{   var imgData={"date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
    //上面的代码因为要实现可以加载的效果，因为没有服务器传输数据，前端不能获取输出，所以在这里定义JSON字符串来模拟数据
    imgLoaction("container","box");
    window.onscroll = function () //window.onscroll方法来监听滚动条
    {
        // checkFlag();//调用函数的执行
        if(checkFlag())
        {
            var cparent = document.getElementById("container");//得到根目录来动态加载
            for(var i = 0;i<imgData.date.length;i++)//因为不只加载一次，所以使用for循环，i小于JSON字符串的长度
            {
                //因为现在需要动态加载，那么就要获得原本静态的标签及其class
                var ccontent = document.createElement(("div"));//动态创建元素
                ccontent.className = "box";//给它添加className
                //因为它里面还要根视图，所有要在父级空间上继续动态创建
                cparent.appendChild(ccontent);//加载根视图创建子节点
                var boximg = document.createElement("div");//创建该节点的元素
                boximg.className = "box_img";
                //它里面还有一层还需要加载根视图创建字节点
                ccontent.appendChild(boximg);//加载根视图创建字节点
                var img =document.createElement("img")//创建该节点的元素
                img.src = "img/"+imgData.date[i].src;//加载上src的属性
                boximg.appendChild(img);加载根视图
                imgLoaction("container","box");//可能会有空白，因为它不会有下面的操作，调用这个方法让他居然下面的操作

            }
        }
    }
}
function checkFlag() //返回布尔类型，true允许加载数据，false不允许加载
{
    var cparent = document.getElementById("container");//得到当前内容的id
    var ccontent = getChildElement(cparent,"box");//得到当前所有子对象
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;//得到最后一张图片距顶部的位置
    // console.log(lastContentHeight);//打印到控制台,查看最后一张图片距顶部的高度
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
    //上面的代码因为存在浏览器兼容问题，需要用到异或，scrollTop新出现的内容，它的顶部就是当前页面的末尾
    console.log(scrollTop);//在控制台查看scrollTop的值
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight//也存在浏览器兼容问题，得到当前页面的高度
    // console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);//打印出他们三个的值
    if(lastContentHeight<scrollTop+pageHeight)//当最后一张图片距顶部的高度小于新出现的内容+页面的高度
    {
        return true;
    }
}
function imgLoaction(parent,content)
{
    //将parent下的所有内容全部取出
    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";

    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);
            // console.log(minheight);//在控制台打印最小高度
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minheight + "px";
            var minIndex = getminheight(BoxHeightArr,minheight)
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
        }
    }
}
function getminheight(BoxHeightArr,minHeight)
{
    for(var i in BoxHeightArr)
    {
        if(minHeight==BoxHeightArr[i])
        {
            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;
}