<div id="app">
  <div class="photos" :style="{height: containerHeight}">
    <img class="photo" :src="photo" v-for="photo in photos" :key="photo">
  </div>
</div>

.photos{
  width:620px;
  height: 700vh;
  display: flex;
  flex-flow: column;
  flex-wrap:wrap;
}
.photo{
  display:block;
  margin:5px;
  object-fit:none;
}

function rnd(min, max) {
  return min + ~~((max-min)*Math.random())
}
let app = new Vue({
  data: {
    photos: [],
    photoHeights: []
  },
  created() {
    this.photos = Array.from({length: 50}).map(v => {
      let height = rnd(100, 300)
      this.photoHeights.push(height + 10)
      return Mock.Random.dataImage('200x' + height)
    })
  },
  computed: {
    containerHeight() {
      // 这里的容器高度要根据瀑布流的列数动态计算
      return this.photoHeights.reduce((prev,curr) => prev+ curr, 400) / 3 + 'px'
    }
  }
})
app.$mount(document.getElementById('app'));