原生实现瀑布流的简单Demo

一、Html布局

<div id="main">
    <div class="box">
      <div class="pic">
        ![](images.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](mingo.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](ace.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](images.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](mingo.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](ace.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](mingo.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](ace.jpg)
      </div>
    </div>
  </div>

二、Css样式

<style>
  *{
    margin:0;
    padding: 0;
  }
  #main{
    position: relative;
  }
  .box{
    padding: 15px 0 0 15px;
    float: left;
  }
  .pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow:0 0 5px #ccc;
  }
  .pic img{
    width: 320px;
    height: auto;
  }
</style>

三、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<oElements.length;i++){
      if(oElements[i].className == clsName){
        boxArr.push(oElements[i]);
      }
    }
    return boxArr;
  }
  //取出oBoxs小值的索引
  function getMinhIndex(arr,val){
    for(var i = 0;i < arr.length;i++){
      if(arr[i] == val){
        return i;
      }
    }
  }
  //检测是否具备了滚动加载数据块的条件
  function checkScrollSlide(){
    var oParent = document.getElementById('main');
    var oBoxs = getByClass(oParent,'box');//取出所有图片盒子
    var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
    var height = document.body.clientHeight||document.documentElement.clientHeight;
    return (lastBoxH<scrollTop+height)?true:false;
  }