原生实现瀑布流的简单Demo

一、Html布局

    

      

        ![](images.jpg)
      
    
    

      

        ![](mingo.jpg)
      
    
    

      

        ![](ace.jpg)
      
    
    

      

        ![](images.jpg)
      
    
    

      

        ![](mingo.jpg)
      
    
    

      

        ![](ace.jpg)
      
    
    

      

        ![](mingo.jpg)
      
    
    

      

        ![](ace.jpg)
      
    
  

二、Css样式

三、Js部分

window.onload=function(){
    waterfall('main','box');
    window,onscroll = function(){
      var oParent = document.getElementById("main");
      //模拟后台动态添加的json数据块
      var dataInt = {"data":[{"src":"images.jpg"},{"src":"ace.jpg"},{"src":"mingo.jpg"}]}
      
      if(checkScrollSlide){
        //将数据块渲染到当前页面的尾部
        for(var i = 0;i < dataInt.data.length;i++){
          var oBox = document.createElement("div");
          oBox.className = "box";
          oParent.appendChild(oBox);
          var oPic = document.createElement("div");
          oPic.className = "pic";
          oBox.appendChild(oPic);
          var oImg = document.createElement("img");
          oImg.src = dataInt.data[i].src;
          oPic.appendChild(oImg);
        }
        waterfall('main','box');
      }
    }
  }

  //设置Box所在位置，实现瀑布流效果
  function waterfall(parent,box){
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent,box);//将main下所有class为box的元素取出来

    //计算整个页面显示的列数cols(页面宽/固定盒子宽)
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/oBoxW)||Math.floor(document.body.clientWidth/oBoxW);

    //设置main的宽度
    oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto';
    var heightArr = [];//存放每一列高度的数组
    for(var i = 0;i < oBoxs.length;i++){
        if(i < cols){//完成第一行盒子后存储它们的高度
          heightArr.push(oBoxs[i].offsetHeight);
        }else{
          //处理剩下的盒子的摆放位置
          //借助apply()方法求出数组中的最小值
          var minH = Math.min.apply(null,heightArr);
          var index = getMinhIndex(heightArr,minH);
          oBoxs[i].style.position = 'absolute';
          oBoxs[i].style.top = minH + 'px';
          // oBoxs[i].style.left = index*oBoxW + 'px';
          oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
          //更新oBoxs位置信息
          heightArr[index] += oBoxs[i].offsetHeight;
        }
    }
  }
  function getByClass(parent,clsName){
    var oElements = parent.getElementsByTagName("*");
    var boxArr = [];
    for(var i = 0;i