JavaScript实现瀑布流布局

瀑布流布局有一个特点，所有列的宽度都相同，而高度不相同，如下图所示

<div class="pic-box">
    <div class="pic">
        <img src="img/1.jpg" alt="1">
    </div>
</div>

通过div.pic-box来控制每个盒子之间的间隔，div.pic来设置每个盒子的边框。img的宽度为200px，由于div.pic-box需要用到绝对定位，所以它的父元素需要设置position:relative;

function waterfall(parent,box){
  let oParent = document.getElementById(parent);
  let oBoxs = oParent.getElementsByClassName(box);
  let boxWidth = oBoxs[0].offsetWidth;
  let screenWidth = document.body.clientWidth || document.documentElement.Width;
  let cols = Math.floor(screenWidth/boxWidth);//每一排有多少列
  oParent.style.width = boxWidth * cols + 'px';
  oParent.style.margin = '0 auto';
  let aBoxHeight = [];
  //第一排的照片正常排列，第二排开始每一张照片找到上一排照片最短高度的地方插入
  for(let i = 0,lens = oBoxs.length;i < lens;i++){
    if(i < cols){
      aBoxHeight.push(oBoxs[i].offsetHeight);
    }else {
      let minHeight = Math.min.apply(null,aBoxHeight);
      let index = getIndex(aBoxHeight,minHeight);
      oBoxs[i].style.position = "absolute";
      oBoxs[i].style.top = aBoxHeight[index] +"px";
      oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
      aBoxHeight[index] += oBoxs[i].offsetHeight;
    }
  }
}
function getIndex(arr,val){
  for(let i = 0,lens = arr.length;i < lens;i++){
    if(arr[i] === val){
      return i;
    }
  }
}

这样瀑布流的布局就完成了，如果还想要滚动时动态加载新的图片，还需要添加一段代码

let data = [{"src":"img/1.jpg"},{"src":"img/22.jpg"},{"src":"img/13.jpg"},{"src":"img/14.jpg"},{"src":"img/5.jpg"},{"src":"img/16.jpg"}];
  //添加滚动监听函数，自动加载图片
  window.addEventListener("scroll",function(event){
    if(checkScroll("container","pic-box")){
      for(let i = 0,lens = data.length;i < lens;i++){
        let box = document.createElement("div");
        box.className = "pic-box";
        let pic = document.createElement("div");
        pic.className = "pic";
        let img = document.createElement("img");
        img.src = data[i].src;
        img.alt = i;
        pic.appendChild(img);
        box.appendChild(pic);
        document.getElementById("container").appendChild(box);
        waterfall("container","pic-box");
      }
    }
  });
};

当窗口滚动到最后一个盒子的一半高度都超过浏览器底部时，自动加载新的图片