JS控制自适应瀑布流

创建一个宽度固定，高度自适应且自动加载的waterfall简单网页。

HTML部分

1.首先页面内容如下（部分），每个图片都放在一个div中，再放入一个大div中。

<span style="font-size:18px;"><div id="container">
        <div class="box">
            <div class="box_img">
                <img src="image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/2.jpg">
            </div>
        </div></span>

JS部分

1.实现宽度固定，瀑布流的宽度由浏览器当前宽度和图片宽度（图片宽度通过css固定大小）决定。

首先通过id和class获取先前定义好的图片元素。（parent：“container”，content：“box”，返回的是class="box_img"的div元素数组）

<span style="font-size:18px;">function getChildElement(parent,content){

    var contentArr = [];
    //获取所有内容
    var allContents = parent.getElementsByTagName("*");
    for(var i = 0;i<allContents.length;i++){
        if(allContents[i].className == content){
            //push向末尾追加
            contentArr.push(allContents[i]);
        }
    }

    return contentArr;

}</span>

设置最外层div的宽度

<span style="font-size:18px;">  var cols = Math.floor(document.documentElement.clientWidth / imageWidth);

    cparent.style.cssText = "width:"+imageWidth*cols+"px;margin:0px auto";</span>

2.实现高度自适应，且下一排第一张图片自动插入上一排高度最小的图片后。x为图片高度最小的元素下标，通过循环判断得，代码省略。

//    得到每张图片的高度
    var boxHeightArr = [];
    for(var i = 0;i<ccontents.length;i++){
        if(i<cols) {
            boxHeightArr[i] = ccontents[i].offsetHeight;
        }else{
            //改变第二排图片位置
            var minHeight = Math.min.apply(null,boxHeightArr);
            var x = getMinImageIndex(boxHeightArr,minHeight);
            ccontents[i].style.position = "absolute";
            ccontents[i].style.top = minHeight+"px";
            ccontents[i].style.left = ccontents[x].offsetLeft+"px";

            boxHeightArr[x] += ccontents[i].offsetHeight;
        }
    }
}

3.定义方法，在window.onscroll的function中调用

function checkFlag(){
    var cparent = document.getElementById("container");
    var ccontents = getChildElement(cparent,"box");

    var lastContentHeight = ccontents[ccontents.length-1].offsetTop;  //最后一个图片的顶部高度
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //scroll滑动高度
    //页面当前能显示的高度

    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight; 

    if(lastContentHeight <= scrollTop+pageHeight){
        return true;
    }
}

4.在window.onscroll中如果checkFlag为真，则载入json并代码插入元素。最后重新调用图片自适应位置方法。