window.onload = function () {
    var d1 = new Waterfall();
    d1.init();
};
//構造函數
function Waterfall() {
    this.oColNum =null;//顯示列數
    this.oData = null;  //存儲請求數據
    this.settings ={
        width:300,
        autoLoad:true
    }
}
//初始化方法
Waterfall.prototype.init = function (opt) {
    extend(this.settings,opt);
    this.requestData();
    var that = this;
    window.onresize = function(){
        that.init();
    };

    //滾動無限加載
    if(this.settings.autoLoad){
        // var that = this;
        window.onscroll = function(){
            if(getScrollTop() + getWindowHeight() == getScrollHeight()){
                that.recreateEle();
            }
        };
    }
};
//創建item
Waterfall.prototype.createItem = function (Data) {
    var owater = document.getElementById("water-content");
    var html="";
    this.oData = Data;
    var _this = this;
    // console.log(this.oData.waterfall);
    this.oData.waterfall.forEach(function (item,index) {
        html +=‘<div class="waterfall-item" style="width: ‘+_this.settings.width+"px"+‘"><div class="waterfall-img"><img class="waterfall-images" src="‘+item.src+‘"></div><div class="info"><span>‘+item.name+‘</span></div></div>‘;
    });
    owater.innerHTML=html;
};


//請求獲取數據
Waterfall.prototype.requestData =function () {
    var xmlhttp;
    var data=null;
    var _this=this;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執行代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            data=eval(‘(‘ +xmlhttp.responseText+ ‘)‘);
            //渲染數據
            _this.createItem(data);

            //存儲img的src
            var src =document.getElementsByClassName("waterfall-images");

            //循環遍歷創建 new Image；對象，保證onload事件執行，以獲取加載img的div高度
            for(var i = 0; i<src.length;i++){
                var img = new Image();
                img.onload =function () {
                    // console.log(img.src);


                    //設置位置樣式

                    _this.setWaterfall();

                };
                img.src = src[i].src;
            }


        }
    };
    xmlhttp.open("GET","waterfall.json",true);
    xmlhttp.send();

};
//排版布局
Waterfall.prototype.setWaterfall = function () {
    this.oColNum = parseInt(viewWidth()/this.settings.width);
    var oColNumHeight = [];//存儲每一列的高度

    for(var i = 0;i<this.oColNum;i++){
        oColNumHeight.push(0);
    }

    var items =document.getElementsByClassName("waterfall-item");
    //遍歷設置元素位置
    for(var i = 0; i < items.length; i++){
        var curEle = items[i],
            idx = 0;//存儲最小值對應索引
        var minHeight = oColNumHeight[0];//臨時存儲最小高度
        //獲取最小高度，以放置元素

        for(var j = 0; j < oColNumHeight.length; j++){

            if( minHeight >oColNumHeight[j]){
                minHeight = oColNumHeight[j];
                idx = j;

            }

        }

        //設置元素位置
        curEle.style.left = curEle.offsetWidth * idx +"px";
        curEle.style.top = minHeight + "px";

        // //更新每列的高度數據


        oColNumHeight[idx] = oColNumHeight[idx]+ curEle.offsetHeight;


    }

    // for (var i = 0; i<items.length ;i++){
    //     items[i].className = ‘waterfall-item‘;
    // }


    // items.forEach(function (item,index) {
    //     var curEle = item,
    //         idx =0,
    //         minHeight = that.oColNumHeight[0];
    //     for(var i = 0; i<that.oColNumHeight.length;i++){
    //         if(minHeight>that.oColNumHeight[i]){
    //             minHeight = that.oColNumHeight[i];
    //             idx = i;
    //         }
    //     }
    //     curEle.style.left = that.settings.width*idx +"px";
    //     curEle.style.top = minHeight + "px";
    //     that.oColNumHeight[idx] = minHeight + curEle.style.height;
    //
    // })
};

//滾動無限加載
Waterfall.prototype.recreateEle = function () {
    var dataSrc = {
        "data":[
            {
                "src":"1.jpg",
                "name":"重加載！"
            },
            {
                "src":"5.jpg",
                "name":"重加載！"
            },
            {
                "src":"3.jpg",
                "name":"重加載！"
            },
            {
                "src":"6.jpg",
                "name":"重加載！"
            },
            {
                "src":"9.jpg",
                "name":"重加載！"
            },
            {
                "src":"8.jpg",
                "name":"重加載！"
            },
            {
                "src":"1.jpg",
                "name":"重加載！"
            },
            {
                "src":"5.jpg",
                "name":"重加載！"
            },
            {
                "src":"3.jpg",
                "name":"重加載！"
            },
            {
                "src":"6.jpg",
                "name":"重加載！"
            },
            {
                "src":"9.jpg",
                "name":"重加載！"
            },
            {
                "src":"8.jpg",
                "name":"重加載！"
            }
        ]
    };
    var _this =this;
    var oDiv = document.getElementById("water-content");
// <div class="waterfall-img"><img class="waterfall-images" src="‘+item.src+‘"></div><div class="info"><span>‘+item.name+‘</span></div>
    //創建加載的元素
    for (var i = 0; i < dataSrc.data.length;i++){
        var oItem = document.createElement("div");
        oItem.className = "waterfall-item";
        oItem.style.width = _this.settings.width +‘px‘;
        oDiv.appendChild(oItem);

        var oItemImg = document.createElement("div");
        oItemImg.className = ‘waterfall-img‘;
        oItem.appendChild(oItemImg);

        var oImg = document.createElement("img");
        oImg.className = ‘waterfall-images‘;
        oImg.src =dataSrc.data[i].src;
        oItemImg.appendChild(oImg);

        var oInfoDiv = document.createElement("div");
        oInfoDiv.className = ‘info‘;
        oItem.appendChild(oInfoDiv);

        var oSpan = document.createElement("span");
        oSpan.innerHTML = dataSrc.data[i].name;
        oInfoDiv.appendChild(oSpan);
    }
    //存儲img的src
    var src =document.getElementsByClassName("waterfall-images");

    // console.log(src);
    //循環遍歷創建 new Image；對象，保證onload事件執行，以獲取加載img的div高度
    for(var i = src.length - 1; i > src.length - dataSrc.data.length;i--){
        var img = new Image();
        img.onload =function () {

            //設置位置樣式
            _this.setWaterfall();
            // console.log(‘.....‘)
        };
        img.src = src[i].src;
    }

};


//獲取瀏覽器可視寬度
function viewWidth() {
    return document.documentElement.clientWidth;
}
//實現復制
function extend(obj1,obj2) {
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}


//滾動條在Y軸上的滾動距離

function getScrollTop(){
    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    if(document.body){
        bodyScrollTop = document.body.scrollTop;
    }
    if(document.documentElement){
        documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
}

//文檔的總高度

function getScrollHeight(){
    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    if(document.body){
        bodyScrollHeight = document.body.scrollHeight;
    }
    if(document.documentElement){
        documentScrollHeight = document.documentElement.scrollHeight;
    }
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
}

//瀏覽器視口的高度

function getWindowHeight(){
    var windowHeight = 0;
    if(document.compatMode == "CSS1Compat"){
        windowHeight = document.documentElement.clientHeight;
    }else{
        windowHeight = document.body.clientHeight;
    }
    return windowHeight;
}

js實現瀑布流布局