Home
Layout
Dynamic Masonry Layout For Vue – flex-waterfall

Dynamic Masonry Layout For Vue – flex-waterfall

Tsuk1ko Last Updated: 4 weeks ago

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:

Dynamic Masonry Layout For Vue - flex-waterfall

Changelog:

v2.2.0 (02/21/2023)

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

Related Posts

Add Comment