vue-flex-waterfall is a horizontal sorting waterfall layout component for Vue.js, achieved through flex layout.
masonry layout using flexbox, vue masonry css, vue masonry tutorial, vue masonry gallery, vue masonry wall, masonry dynamic grid layout, yegervue masonry wall
Try to add, delete or modify some blocks, and resize the window!
How to make use of it:
Install and download:
# Yarn $ yarn add vue-flex-waterfall # NPM $ npm install vue-flex-waterfall --save
1. Import and register the component.
import VueFlexWaterfall from 'vue-flex-waterfall'; export default { ... components: { VueFlexWaterfall, ... }, ... }
2. Add the Waterfall layout 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. The default props to configure the layout.
col: { type: Number, default: 1, }, colSpacing: { type: [Number, String], default: 0, }, breakAt: { type: Object, default: () => ({}), }, breakByContainer: { type: Boolean, default: false, },
Dynamic Masonry Layout For Vue, vue-flex-waterfall Plugin/Github, masonry grid generator
See Demo And Download
Official Website(Tsuk1ko): Click Here
This superior jQuery/javascript plugin is developed by Tsuk1ko. For extra advanced usage, please go to the official website.