SOURCE

window.onload = function () {
    //瀑布流方法
    waterfall('main', 'box');
    //模拟数据
    let dataInt = {
        "data": [{
            "src": "0.jpg"
        },
        {
            "src": "1.jpg"
        },
        {
            "src": "2.jpg"
        },
        {
            "src": "3.jpg"
        }]
    };
    //滚动时瀑布
    window.onscroll = function () {
        if (checkScrollSlide()) {
            // 得到父元素
            let oParent = document.getElementById('main');
            // 将数据块渲染到页面的尾部
            for (let i = 0; i < dataInt.data.length; i++) {
                let oBox = document.createElement('div');
                oBox.className = 'box';
                // 把该盒子添加到父元素的最后
                oParent.appendChild(oBox);
                let oPic = document.createElement('div');
                oPic.className = 'pic';
                oBox.appendChild(oPic);
                let oImg = document.createElement('img');
                oImg.src = "./images/" + dataInt.data[i].src;
                oPic.appendChild(oImg);
            }
            waterfall('main', 'box');
        }
    };
}

function waterfall(parent, box) {
    //将main下的所有class为box的元素取出来
    let oParent = document.getElementById(parent);
    let oBoxs = getByClass(oParent, box);
    //计算整个页面显示的列数
    let oBoxW = oBoxs[0].offsetWidth;
    let cols = Math.floor(document.documentElement.clientWidth / oBoxW);
    //设置main的宽度并且居中对齐
    oParent.style.cssText = 'width: ' + oBoxW * cols + 'px; margin: 0 auto;';
    //存放每列最低高度的数组
    let hArr = [];
    for (let i = 0; i < oBoxs.length; i++) {
        if (i < cols) {
            hArr.push(oBoxs[i].offsetHeight);
        } else {
            let minH = Math.min.apply(null, hArr);
            let index = getMinHIndex(hArr, minH);
            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top = minH + 'px';
            oBoxs[i].style.left = oBoxW * index + 'px';
            // oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
            // 改变数组
            hArr[index] += oBoxs[i].offsetHeight;
        }
    }
}

//根据class获取元素
function getByClass(parent, clsName) {
    let boxArr = new Array(); //用来存储获取到的所有class为clsName的元素
    let oElements = parent.getElementsByTagName('*');
    for (let i = 0; i < oElements.length; i++) {
        if (oElements[i].className == clsName) {
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}

function getMinHIndex(arr, val) {
    for (let i in arr) {
        if (arr[i] == val) {
            return i;
        }
    }
}

//检测是否具备了滚动条加载数据的条件
function checkScrollSlide() {
    let oParent = document.getElementById('main');
    let oBoxs = getByClass(oParent, 'box');
    let lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    let height = document.body.clientHeight || document.documentElement.clientHeight;
    return lastBoxH < scrollTop + height ? true : false;
}

<div id="main">
	<div class="box">
		<div class="pic">
			<img src="./images/0.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/1.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/2.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/3.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/4.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/5.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/6.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/7.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/8.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/9.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/10.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/11.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/12.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/13.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/14.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/15.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/16.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/17.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/18.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/19.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/20.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/21.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="./images/22.jpg" alt="">
    </div>
  </div>
</div>

* {
    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: 165px;
    height: auto;
}