另一个适用于Vue.js应用程序的响应式砖石风格布局系统。支持服务器端渲染和延迟加载。

安装和下载：

# Yarn
$ yarn add vue-masonry-wall

# NPM
$ npm install vue-masonry-wall --save

使用：

1.安装后导入vue-masonry-wall。

import VueMasonryWall from "vue-masonry-wall";

2.将vue-masonry-wall组件添加到模板。

<template>
  <section>
    <vue-masonry-wall :items="items" :options="options" @append="append">
      <template v-slot:default="{item}">
        <div class="Item">
          <img :src="item.image"/>
          <div class="Content">
            <h5 class="text-ellipsis-1l">{{item.title}}</h5>
            <p class="text-ellipsis-2l">{{item.content}}</p>
          </div>
        </div>
      </template>
    </vue-masonry-wall>
  </section>
</template>

3.在应用程序上渲染砌体布局。

export default {
  name: "ExampleMasonry",
  components: {VueMasonryWall},
  data() {
    return {
      options: {
        width: 300,
        padding: {
          2: 8,
          default: 12
        },
      },
      items: [
        {
          title: '标题',
          content: '说明.',
          image: 'https://picsum.photos/id/1015/600/600'
        },
        {
          title: '标题',
          content: '说明.',
          image: 'https://picsum.photos/id/1019/600/700'
        },
        {
          title: '标题',
          content: '说明.',
          image: 'https://picsum.photos/id/1039/600/800'
        },
        {
          title: '标题',
          content: '说明.',
          image: 'https://picsum.photos/id/1042/600/300'
        },
      ]
    }
  },
  methods: {
    append() {
      // 追加方法
    }
  }
}

4.默认props。

/**
 * 要添加到瀑布流的项目数组
 */
items: {
  type: Array,
  required: true
},
/**
 * 配置瀑布流结构的选项。
 *
 * {
 *     width: 300,
 *     padding: {
 *         default: 12,
 *         1: 6,
 *         2: 8,
 *     },
 *     throttle: 300
 * }
 */
options: {
  type: Object,
  required: false
},
/**
 * SSR不知道元素的高度或浏览器的宽度是多少。
 * 但是，您可以根据用户代理进行猜测：https://github.com/nuxt-community/device-module
 * 此参数允许您为SSR呈现预加载一个配置，它将把您的项均匀地分布到所有列中。
 *
 * 一旦客户机被装载，如果配置与SSR不同，它将重新绘制。
 *
 * {
 *     column: 2
 * }
 */
ssr: {
  type: Object,
  required: false
}