js图片加载效果（延迟加载+瀑布流加载）

实现图片延迟加载可以使用以下代码：

1. 先将所有需要加载的图片的src属性设置为一个空白图片或者占位符图片，例如：

<img class="lazy" data-src="图片真实路径" src="占位符路径">

2. 使用JavaScript获取所有需要延迟加载的图片元素，并监听页面滚动事件：

var lazyLoadImg = document.getElementsByClassName('lazy');
var viewHeight = document.documentElement.clientHeight;

function lazyLoad() {
  for(var i = 0, len = lazyLoadImg.length; i < len; i++) {
    var offsetTop = lazyLoadImg[i].getBoundingClientRect().top;
    if(offsetTop < viewHeight) {
      lazyLoadImg[i].src = lazyLoadImg[i].getAttribute('data-src');
      lazyLoadImg[i].classList.remove('lazy');
    }
  }
}

window.addEventListener('scroll', lazyLoad);

3. 当滚动到图片位置时，将data-src属性赋值给src属性即可。

实现瀑布流加载可以使用以下代码：

1. 设置图片容器div的列数和图片间距，例如：

.waterfall {
  column-count: 4;
  column-gap: 20px;
}

2. 使用JavaScript获取所有需要加载的图片，并计算每张图片的宽度和高度：

var waterfall = document.getElementsByClassName('waterfall')[0];
var waterfallImg = waterfall.getElementsByTagName('img');
var columnNum = 4;
var imgWidth = (waterfall.offsetWidth - (columnNum - 1) * 20) / columnNum;
var imgHeightArr = [];

for(var i = 0, len = waterfallImg.length; i < len; i++) {
  var imgHeight = imgWidth * waterfallImg[i].naturalHeight / waterfallImg[i].naturalWidth;
  imgHeightArr.push(imgHeight);
  waterfallImg[i].style.width = imgWidth + 'px';
}

3. 根据每张图片的高度，计算每列的高度，并将图片插入到最短的一列：

function minIndex(arr) {
  var min = arr[0];
  var index = 0;
  for(var i = 1, len = arr.length; i < len; i++) {
    if(arr[i] < min) {
      min = arr[i];
      index = i;
    }
  }
  return index;
}

for(var i = 0, len = waterfallImg.length; i < len; i++) {
  var minIndex = minIndex(imgHeightArr);
  waterfallImg[i].style.top = imgHeightArr[minIndex] + 'px';
  waterfallImg[i].style.left = (imgWidth + 20) * minIndex + 'px';
  imgHeightArr[minIndex] += imgHeightArr[i];
}

4. 当新图片加载完成时，重复步骤2和步骤3即可。