【html+css+js】瀑布流布局and懒加载

瀑布流布局如下：

瀑布流是许多数据块组成的，可以是图片，可以是div，但是它们都有一个特点，就是等宽不等高，正是因为它等宽不等高，所以如果按部就班的排布的话，才会出现很大的缝隙，特别不好看，说白了瀑布流布局就是充分利用图片之间的空隙来合理的布局，使布局看起来好看。

HTML部分：

<div class="pubu">
        <div class="box">
              <img data-original=".jpg" src="1.jpg" alt=""><p class="share">“文字”</p>
        </div>
        <div class="box">
            <img data-original=".jpg" src="1.jpg" alt=""><p class="share">文字</p>
      </div>
      <div class="box">
        <img data-original=".jpg" src="1.jpg" alt=""><p class="share">文字</p>
  </div>
  <div class="box">
    <img data-original=".jpg" src="1.jpg" alt=""><p class="share">文字</p>
</div>
<div class="box">
    <img data-original=".jpg" src="1.jpg" alt=""><p class="share">文字</p>
</div></div>

src：为图片确定一个固定的尺寸，尺寸大小为src引用的那张图片

CSS:

body{
  margin: 0;
  padding: 0;
  background-color: rgb(230, 230, 234);
}
.pubu{
  position:absolute;
  width: 1100px;  
  left: 50%;
  margin-top: -150px;
  margin-left: -550px;
}
.box{
  padding:20px 0 0 20px;
  float: left;
}
.box img{
  position:relative;
  width: 200px;
  height: auto;
  opacity: 0;
}
.share{
  font-family:;
}

JS:

window.onload = function(){
    var oBox=document.getElementsByClassName("box");
    var oImg=document.getElementsByTagName('img');
    var oBoxw=oBox[0].offsetWidth;
    var cols=5;
  
    loadImg(oImg);
    window.onscroll = function(){
      loadImg(oImg);
    };
  
    function waterfall(ele,col,eleWidth){
      var hArr = [];
      for(var i = 0;i < ele.length;i++){
          if(i < col){
              hArr.push(ele[i].offsetHeight);
          }else{
              //min不能用于数组，apply的第一个参数传递作用域，第二个参数传递数组。Math.min.apply(null, [1, 2, 3]) 等价于 Math.min(1, 2, 3)
              var minH = Math.min.apply(null,hArr);
              var index = hArr.indexOf(minH);
              ele[i].style.position = 'absolute';   
              ele[i].style.top = minH + 'px';           //ele.style.left/top 是有px的，而offsetHeight/offsetWidth是没有px的
              ele[i].style.left = index * eleWidth + 'px';
              hArr[index] += ele[i].offsetHeight;
          }
      }
    }
  
    function loadImg(arr){
    for( var i = 0,len = arr.length; i < len; i++){
      //判断图片相对应视图窗口的高度是否小于屏幕可视窗口大小
      if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){  //判断图片
        arr[i].isLoad = true;
        if(arr[i].dataset){                    //判断是否存在HTML5的dataset对象
          aftLoadImg(arr[i],arr[i].dataset.original);    
        }else{
          aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
        }
        arr[i].style.cssText = "transition: opacity 4s; opacity: 1;"    //使opacity变化在4秒内完成
      }
    }
  }
  
  function aftLoadImg(obj,url){
    obj.src = url;
    waterfall(oBox,cols,oBoxw);   //需要再次调用瀑布流方法
  }
  }

懒加载：

这里主要讲解一下最后“function checkScrollSlide()”的思想；因为我们这个要实现一直滑一直滑的效果（也就是懒加载），所以我们这里就拿最后一张图片来做对比，通俗理解函数“checkScrollSlide()”的作用就是最后一张图片露出一半了你就应该加载。