Home Animation Plugins Horizontal Sort Waterfall Layout Component for Vue.js

Horizontal Sort Waterfall Layout Component for Vue.js

Animation Plugins webcodeflow · May 28, 2022 · 0 Comment

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