【瀑布流插件】vue-masonry

**最近一直在画静态页面，有个图片列表，

布局很紧凑，图片宽度一样，高度不一样，

但是效果图上都是紧挨在一起，我用普通的v-for循环加css布局，

它会以这一行最高的那张图片的高度为准，

导致图片高度小的，下一行不能紧挨在一起**

如图：

但是我要的效果是这样的，如图：

依靠vue-masonry，实现了一些简单的功能,可参考这篇文章，讲的比较详细
《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录

npm install vue-masonry

在main.js里

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

在要用到的页面

import Masonry from "masonry-layout";

 <div class="discover" v-masonry>
        <div
          v-for="(v, ix) in discoverImg"
          :key="ix"
          class="discoveImg"
          v-masonry-tile
        >
          <img :src="v.img" alt="" />
        </div>

css部分

.discover {
    height: 100% !important;
  }
  .discoveImg {
    float: left;
    padding: 10px;

    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    img {
      width: 200px;
    }
  }

效果实现了，还是挺开心的