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实现瀑布流布局
原文地址：https://www.cnblogs.com/chenjianbao/p/9969663.html