js+CSS简单实现瀑布流布局

  <div class="container">
    <div class="item">
      <img src="..."/>
      <h2>...</h2>
    </div>
    ...
</div>

.container {
  width: 1200px;
  margin: 20px auto;
  columns: 3;
  column-gap: 20px;
}

.container .item {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 20px;
}
.container .item img{
  width: 100%;
}

<div id="container"></div>

function createElement(itemData) {
  return new Promise((resolve, reject) => {
    let div = document.createElement('div')
    div.innerHTML = `...`
    div.className = 'item'
    // 监听图片的load事件
    div.querySelector('img').addEventListener('load', () => {
      resolve(div)
    })
  })
}

// 获取喵咪的数据
let page = 1  //请求数据的页码
let isReq = false  //设置节流阀，处于请求过程中，则不再请求数据
function loadNewData() {
  if (isReq) return
  isReq = true
  getData()
    .then(data => {
      // 处理新的数据
      let items = data
      let promises = items.map(item => createElement(item))
      Promise.all(promises).then(nodes => {
        let frag = document.createDocumentFragment()
        isReq = false
        page++
        nodes.forEach(node => {
          frag.appendChild(node)
          Node.push(node)
        })
        document.getElementById('container').appendChild(frag)
        waterfall(Node)
      })
    })
    
}

function waterfall(items) {
  for (var i = loaded; i < items.length; i++) {
    let item = items[i]
    let height = item.offsetHeight
    if (i < columns) {
      //满足这个条件则说明在第一行
      item.style.top = 0
      item.style.left = (itemWidth + gap) * i + 'px'
      heightArr.push(height)
    } else {
      //其他行，先找出最小高度列的索引
      const minIndex = getMinIndex(heightArr)
      //top值就是最小列的高度+gap
      const top = heightArr[minIndex] + gap
      item.style.top = top + 'px'
      item.style.left = minIndex * (itemWidth + gap) + 'px'

      //修改原本最小列的高度 
      heightArr[minIndex] = top + height
    }
    loaded = items.length
  }
}

//用于获取heightArr数组中值最小的列的索引。
const getMinIndex = (array) => {
  const min = Math.min.apply(null, array)
  return array.indexOf(min)
}

window.addEventListener('scroll', lazy)
function lazy() {
 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 const documentHeight = document.documentElement.scrollHeight
  // 未显示的内容 = 文档（内容）高度-滚动高度-屏幕高度
  if (documentHeight - scrollTop - clientHeight < 0.7 * clientHeight) {
    loadNewData()
  }
}