Press "Enter" to skip to content

Horizontal Sort Waterfall Layout Component for Vue.js

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.