Vue Nuxt.js + bootstrap + masonry 实现瀑布流

Vue 下实现瀑布流的插件有很多，但是总是有这样那样的缺点，今天找到一款vue-masonry，可以完美的结合Nuxt.js。

1. 安装

   yarn add vue-masonry

2. Nuxt根目录下有个plugins文件夹，创建vue-masonry.js文件

   写入下面的内容

   import Vue from 'vue'
   import {
        VueMasonryPlugin} from 'vue-masonry'
   
   Vue.use(VueMasonryPlugin)
   

3. 在nuxt.config.js文件中添加下面内容

   plugins: [
   	{
         src: '~/plugins/vue-masonry', ssr: false }
   ]
   

4. 使用

官方给出的使用方式是这样的
HTML:

<no-ssr>
      <div v-masonry transition-duration="3s" item-selector=".item" class="masonry-container">
        <div v-masonry-tile class="item" :key="index" v-for="(item, index) in blocks">
          <p>{
  {item}} - {
  {index}}</p>