Install vue-list-virtualized using npm.
npm install vue-list-virtualized --savegit clone https://github.com/yunkitae/vue-virtualized.git
npm i
npm run devimport Vue from 'vue';
import { Masonry } from 'vue-virtualized';
Vue.component('Masonry', Masonry); <masonry
:scroll-top="scrollTop"
:state="state"
:overscan="overscan"
:container-width="containerWidth"
:container-height="containerHeight"
:gutter="gutter"
:grid="grid"
:list="list"
@reflowed="reflowed"
>
<product
slot="cell"
slot-scope="props"
:grid="grid"
:order="props.index"
:item="props.item"
/>
</masonry>| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| scrollTop | true | Number | window scroll y position or element scroll y position | |
| state | false | String | null | Vuex state json stringfy value |
| overscan | false | Number | 0 | If use, View port over size |
| containerWidth | true | Number | 0 | Masonry layout width |
| containerHeight | true | Number | 0 | Masonry layout height |
| gutter | false | Number | 0 | Masonry slot gutter(margin) |
| grid | true | Number | 2 | Masonry horizon slot count |
| list | true | Array | null | list data |
| Name | Description |
|---|---|
| reflowed | slot reflowd |