@fcli/vue-grid-waterfall v1.0.1

vue-grid-waterfall

VUE3 瀑布流组件，基于Grid布局

npm install @fcli/vue-grid-waterfall --save-dev 来安装

在项目中使用
import VueGridWaterfall from '@fcli/vue-grid-waterfall';
const app=createApp(App)
app.use(VueGridWaterfall);

示例：

<template>
  <div class="content">
    <vue-grid-waterfall :data-list="dataList" :columns="3" @getMoreData="getMoreData" :loading="isLoading">
      <template #slot-scope="{ slotProps }">
        <div class="item" :style="{ height: slotProps.data.height, background: slotProps.data.color }">{{ slotProps.data.color
        }}</div>
      </template>
    </vue-grid-waterfall>
  </div>
</template>

<script setup lang="ts">
import vueGridWaterfall from './plugin/index.vue';
import { ref, onMounted } from 'vue'
component: {
  vueGridWaterfall
}

const dataList = ref<any>([]);
//获取随机颜色
const getRandomColor = () => {
  const getColor: any = (color: any) => {
    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : getColor(color);
  };
  return '#' + getColor('')
}

const getMoreData = () => {
  isLoading.value = true;
  getData()
}
const isLoading = ref(true);

//获取数据
const getData = () => {
  for (let i = 0; i < 100; i++) {
    dataList.value.push({ height: 50 + Math.random() * 50 + 'px', color: getRandomColor() })
  }
  setTimeout(()=>{
      isLoading.value = false;
  })
}

onMounted(() => {
  getData()
})
</script>

slot

例：

  <template #slot-scope="{slotProps}">
    <div class="li">{{ slotProps.data.text }}</div>
  </template>