Vue-waterall-virtuallist NPM

vue-waterfall-virtual-list

support for vue3
waterfall like pinterest

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	数据中高度的键值