原生js瀑布流布局+图片懒加载

瀑布流布局

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;        }    }  }

方法：将第一行图片的高度存在数组中，从第二行开始，寻找数组中的最小值，将图片放在高度最少的那一列，并将数组中高度更新，接下来放下一张图片。

懒加载

懒加载也就是延迟加载。

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成同一张图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

为什么要使用懒加载？

很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。

懒加载的原理是什么？

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2)页面加载完成后，判断图片是否在用户的视野内（getBoundingClientRect().top和document.documentElement.clientHeight比较），如果在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

懒加载的优点是什么？

页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好。

 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);   //需要再次调用瀑布流方法}}

瀑布流布局+懒加载

github代码 

页面示例