yarn add vue3-waterfall

// or

npm i vue3-waterfall --save

<template>
  <waterfall
    :list="list"
    :cols="4"
    :footerHeight="60"
    :nomore="noMore"
    @preLoaded="loadedEnd"
    @scrollReachBottom="loadMore">
    <!-- Customize Image box -->
    <template v-slot:default="{ item }">
      <div class="imgbox">
        <img :src="item.imgSrc" :alt="item.title">
      </div>
    </template>
    <!-- Customize footer -->
    <template v-slot:footer="{ item }">
      <span>{{ item.title }}</span>
    </template>
    <template v-slot:loading>
      <span>Loading...</span>
    </template>
    <template v-slot:nomore>
      <span>NoMore...</span>
    </template>
  </waterfall>
</template>

<script>
import { defineComponent } from 'vue'
import VueWaterfall from 'vue3-waterfall'

export default defineComponent({
  data() {
    return {
      list: [],
      noMore: false
    }
  },
  components: {
    VueWaterfall
  },
  methods: {
    loadMore() {
      console.log('Load More...')
      if (this.list.length >= 30) {
        this.noMore = true
      }
    },
    loadedEnd() {
      console.log('Images preload done.')
    }
  },
})
</script>