flex-waterfall is a Vue.js layout library to generate a dynamic, fluid, Masonry style grid layout for modern web applications.
How to use it:
1. Import and register the component.
import VueFlexWaterfall from 'vue-flex-waterfall'; export default { ... components: { VueFlexWaterfall, ... }, ... }
2. Add the flex-waterfall component to the template.
<vue-flex-waterfall class="custom-class" :col="5" :col-spacing="15" :break-at="breakAt" :break-by-container="true" @order-update="onOrderUpdate" style="align-content: center;" > <div class="item" v-for="(item, index) in items" :key="item.i" :style="{ height: `${item.h}px` }" > Item here </div> </vue-flex-waterfall>
3. Default props to config the layout.
height?: number | string; alignContent?: string; col?: number | string; colSpacing?: number | string; breakAt?: Record<string, number>; breakByContainer?: boolean;
Preview:
Changelog:
v2.2.0 (02/21/2023)
- vite@4 and dts plugin
v2.1.0 (07/12/2022)
- add align-content option
v2.0.0 (07/11/2022)
- migrate to Vue 3
Download Details:
Author: Tsuk1ko
Live Demo: https://tsuk1ko.github.io/vue-flex-waterfall/
Download Link: https://github.com/Tsuk1ko/vue-flex-waterfall/archive/master.zip
Official Website: https://github.com/Tsuk1ko/vue-flex-waterfall
Install & Download:
# Yarn
$ yarn add vue-flex-waterfall
# NPM
$ npm install vue-flex-waterfall --save