vue 瀑布流组件

地址

• https://github.com/WouterFlorijn/vue-stack-grid
• https://tsuk1ko.github.io/vue-flex-waterfall/
• https://github.com/fuxingloh/vue-masonry-wall (亲测，自适应瀑布流)

安装

npm i vue-masonry-wall
# or yarn
yarn add vue-masonry-wall

基本使用

// 该案例是滑倒底部会自动加载更多数据
<template>
  <div id="app">
    <h2>Masonry: append endlessly</h2>
    <vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" @append="append">
      <template v-slot:default="{item}">
        <div class="item">
          <h5>{{item.title}}</h5>
          <p>{{item.content}}</p>
        </div>
      </template>
    </vue-masonry-wall>
  </div>
</template>
<script>
  import VueMasonryWall from "vue-masonry-wall";

  export default {
    name: 'app',
    components: {VueMasonryWall},
    data() {
      return {
        items: [
          {title: 'Item 0', content: 'Content'},
          {title: 'Item 1', content: 'Content'},
        ]
      }
    },
    methods: {
      /**
       * I am mocking a API call that load 20 objects at a time.
       */
      append() {
        for (let i = 0; i < 20; i++) {
          this.items.push({title: `Item ${this.items.length}`, content: 'Content'})
        }
      }
    }
  }
</script>

优点

• 无需操作DOM
• SSR friendly, able to load and re hydrate later
• 仅有一个依赖项
• 自动延迟追加，滚动到自动加载更多
• 自动排版
• 响应式设计