flex-waterfall是一个Vue.js布局库，用于为现代Web应用程序生成动态，流畅的Masonry风格的网格布局。

安装和下载：

# Yarn
$ yarn add vue-flex-waterfall

# NPM
$ npm install vue-flex-waterfall --save

如何使用它：

1.导入并注册组件。

import VueFlexWaterfall from 'vue-flex-waterfall';
export default {
  ...
  components: {
    VueFlexWaterfall,
    ...
  },
  ...
}

2.将flex-waterfall组件添加到模板。

<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.默认props 来配置布局。

col: {
  type: Number,
  default: 1,
},
colSpacing: {
  type: [Number, String],
  default: 0,
},
breakAt: {
  type: Object,
  default: () => ({}),
},
breakByContainer: {
  type: Boolean,
  default: false,
},