js实现瀑布流布局

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();            }        };    }};//创建itemWaterfall.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;}

原文地址：https://www.cnblogs.com/chenjianbao/p/9969663.html