Vue3-Masonry
Vue3 Masonry component
Installation
npm install vue3-masonry
Usage
<Masonry
:items="itemList"
:column-width="columnWidth"
:columns-num="columnNum"
:gap="10"
>
<template #default="{item}">
<img :src="https://raw.githubusercontent.com/roiiiu/vue3-masonry/HEAD/item.url" :width="columnWidth"/>
</template>
</Masonry>
Props
| Name |
Type |
Default |
Description |
| items |
Array |
[] |
List of items to display |
| column-width |
Number |
200 |
Width of each column |
| columns-num |
Number |
3 |
Number of columns |
| gap |
Number |
10 |
Gap between columns |