vue-masonry使用教程

vue-masonry是一个基于Vue.js的瀑布流布局组件，可以实现网站图片或其他内容的瀑布流展示，下面是使用教程：

1. 安装vue-masonry

使用npm安装：

npm install vue-masonry --save

2. 引入vue-masonry

在需要使用瀑布流布局的组件中引入vue-masonry：

import VueMasonry from 'vue-masonry'

3. 注册vue-masonry组件

在组件中注册VueMasonry组件：

components: {
  VueMasonry
}

4. 使用vue-masonry

在模板中使用VueMasonry组件，并将需要展示的内容包含在VueMasonry组件内部：

<vue-masonry>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
</vue-masonry>

5. 完整代码示例

<template>
  <div>
    <vue-masonry>
      <div v-for="(item, index) in items" :key="index" class="item">{{ item }}</div>
    </vue-masonry>
  </div>
</template>

<script>
import VueMasonry from 'vue-masonry'

export default {
  name: 'Demo',
  components: {
    VueMasonry
  },
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5', 'item 6']
    }
  }
}
</script>

<style>
.item {
  width: 200px;
  margin: 10px;
  background-color: #ccc;
  border-radius: 5px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}
</style>

以上就是vue-masonry的使用教程，希望能对你有所帮助！