v3-waterfall瀑布流使用

业务需求：实现一个瀑布流布局，然后自适应宽高比例。可以直接安装v3-waterfal组件，然后gitub会有api文档。如果有新的问题可以直接再Github提问issue给原作者，原作者回的速度很快

官网v3-waterfall

我这里需求是在整个页面进行滚动。所以不需要设置父元素的高。

我理解的逻辑是一进来就开始调接口。然后触底加载的时候继续调接口，直到接口数据返回为空。那会显示加载完的文字

  <v3-waterfall
            :list="list" //瀑布流数据
            :colWidth="285"	//瀑布留每一条数据的宽
            style="min-height: calc(100vh - 130px)"	//自定义样式
            :virtual-time="400" //开启虚拟列表
            :virtual-length="1000"	//不存在视图内多远开始虚拟隐藏
            :isLoading="loading" //加载状态
            :isOver="over" //是否全部加载完成
            :animation="false"
            :gap="10"
            :bottomGap="10"
            overText="There are no more cards, pls try to creating new recognition cards for our colleagues." //加载完的文字
            ref="v3WaterfallRef" //这个就是用来重新加载绑定的ref
            class="waterfall"
            @scrollReachBottom="getNext" //触发加载
        >
         <template v-slot:default="slotProp">
         </template>
 </v3-waterfall>

const list = ref<any[]>([]);
const over = ref(false);
const loading: any = ref(false);
const images = ref<any[]>([]);
const offset = ref(0);

const getNext: () => Promise<void> = async (): Promise<void> => {
    if (isLoad) return;
    isLoad = true;
    await fetchList();
    isLoad = false;
};

const fetchList = async (): Promise<void> => {
    await loadImages(); //在这里调接口
    list.value = list.value.concat(images.value);
    offset.value = list.value.length;
};
async function loadImages() {
  const cardList: any = await getCardlist({limit: 20,offset: offset.value});
  images.value = cardList
  dataLoading.value = false;
  loading.value = false;
  offset.value = offset.value + images.value.length;
  if (images.value.length == 0) over.value = true;
}

//如果需要重新加载页面（比如有筛选项，数据会发生变化，就需要传参之前调reRender.调完reRender在去重新调getNext）可以使用这个方法
const reRender = () => {
    v3WaterfallRef.value?.reRender();
};