vue-waterfall-virtual-list

• support for vue3
• waterfall like pinterest

Demo

Demo

Start

yarn add vue-waterfall-virtual-list
// or npm
npm install --save vue-waterfall-virtual-list

usage

root component:

<template>
 <div>
    <waterfallVirtialList
      :data-key="'key'"
      :columnWidth="260"
      :data-source="list"
      :data-component="itemComponent"
      :width-key="'width'"
      :height-key="'height'"
      :columnGap="16"
      :rowGap="16"
    ></waterfallVirtialList>
 </div>
</template>

<sciprt lang="ts" setup>
  import item from './item.vue';
  // 子组件
  const itemComponent = item;

  const list = [{
    width: 100,
    height: 100,
    url: "http://demo.jpg",
  }];
</script>

item component

<script lang="ts" setup>
const props = defineProps(["item"]);
</script>
// don't use lazy-load
<template>
  <div>
    <img
      :src="item['images']['474x']['url']"
      fetchpriority="auto"
      loading="auto"
    />
  </div>
</template>

with slot

// you can listen tobottom event and create footer slot
<template>
 <div>
    <waterfallVirtialList
      :data-key="'key'"
      :columnWidth="260"
      :data-source="list"
      :data-component="itemComponent"
      :width-key="'width'"
      :height-key="'height'"
      :columnGap="16"
      :rowGap="16"
      :tobottom="onReachBottom"
    >
      <template #footer>loading...</template>
    </waterfallVirtialList>
 </div>
</template>

Prop type

Required props

| Prop | Type | Description | | -------------- | ----------------- | ---------------- | | data-key | String|Funcntion | 唯一 key | | data-source | Array | 数组 | | data-component | Component | 子组件 | | column-width | Number | 每列的宽度 | | width-key | String | 数据中宽度的键值 | | height-key | String | 数据中高度的键值 |

Optional props

| Prop | Type | Description | | --------- | ------ | ----------- | | rowGap | Number | 行间隔 | | columnGap | Number | 列间隔 |

注意间隔是内边距实现的

Others

其他的属性请查看代码

Thanks

vue-virtual-scroll-list

License

MIT License.