瀑布流布局

window.onload=function(){

  waterfall(‘main‘,‘box‘);
  var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};
  window.onscroll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById(‘main‘);// 父级对象
            for(var i=0;i<dataInt.data.length;i++){
                var oBox=document.createElement(‘div‘); //添加 元素节点
                oBox.className=‘box‘;                   //添加 类名 name属性
                oParent.appendChild(oBox);              //添加 子节点
                var oWrap=document.createElement(‘div‘);
                oWrap.className=‘wrap‘;
                oBox.appendChild(oWrap);
                var oImg=document.createElement(‘img‘);
                oImg.src=‘./images/‘+dataInt.data[i].src;
                oWrap.appendChild(oImg);
            }
            waterfall(‘main‘,‘box‘);
        };
    }
}

window.onresize=function(){
console.log(‘窗口改变‘);
  waterfall(‘main‘,‘box‘);
}
  

function waterfall(parent,box){
  var oBoxs=getByClass(parent,box);       
  var oMain=document.getElementById(parent);
  var oBoxW=oBoxs[0].offsetWidth;          //获取盒子的宽度
  var num=Math.floor(document.documentElement.clientWidth/oBoxW);
  oMain.style.cssText=‘width:‘+num*oBoxW+‘px; margin:0 auto;‘;
  var hArr=[];                             //保存高度的数组
  for(var i=0; i<oBoxs.length; i++){
      if(i<num){
       hArr[i]=oBoxs[i].offsetHeight;
       oBoxs[i].style.position=‘absolute‘;
       oBoxs[i].style.top=0+‘px‘;
       oBoxs[i].style.left=oBoxW*i+‘px‘;
      }else{
       var minH=Math.min.apply(null,hArr);       //求出最小的高度作为下一个box的top值
       var minHIndex=getminHIndex(hArr,minH);    /*根据数组最小的值获取到它的索引*/
     oBoxs[i].style.position=‘absolute‘;        //改为绝对定位
     oBoxs[i].style.top=minH+‘px‘;
     oBoxs[i].style.left=oBoxs[minHIndex].offsetLeft+‘px‘;
     hArr[minHIndex]+=oBoxs[i].offsetHeight;     //最小高度增加
      }

  }
}

/*根据classname和获取到元素*/
function getByClass(parent,className){
    var arr=[];
    var oParent=document.getElementById(parent);
    var elements=oParent.getElementsByTagName(‘*‘);
    for(var i=0; i<elements.length;i++){
        if(elements[i].className==className){
        arr.push(elements[i]);
        }
    }
    return arr;
}

/*根据数组最小的值获取到它的索引*/
function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}


/*判断是否滚动到了最后的高度*/
function checkscrollside(){
    var oBoxs=getByClass(‘main‘,‘box‘);       
    var oMain=document.getElementById(‘main‘);
    var lastPinH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
    var documentH=document.documentElement.clientHeight;//页面高度
    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}

#main{position:relative; }
.box{padding:15px 0 0 15px; float:left;}         //这里用padding可以方便用offsetHeight获得高度
.wrap{padding:10px; box-shadow:0 0 5px #ccc;}    //添加图片边框和阴影
.box img{width:200px; height:auto;}