Vue-masonry快速上手（第3条最重要！）

之前在做项目时候，需要使用到瀑布流布局，在网上找了好久；一些文章要么内容不全，要么就是坑；本文章只会教你怎样快速上手，如果需要详细的学习，请前往https://www.npmjs.com/package/vue-masonry，好；话不多说，上代码：

1.首先npm安装 npm i vue-masonry

2.然后在main中进行引入，并且Use使用一下（如下图）

3 之后在使用瀑布流组件内引用
import Masonry from ‘masonry-layout’

4. 然后在你需要进行展示的组件中，创建一个生命周期，在里面写入代码，图中的columnWidth看自己需求

5. 在此附上源代码快，文中只需要关注父容器和子容器的class命名

html：

 <div class="content" v-infinite-scroll="load" v-loading="loading" infinite-scroll-distance="1">
        <div v-for="(list, index) in imgs" :key="index"  class="content_one">
            <img :src="list.URL" />
        </div>
    </div>

css：

* {
    margin: 0;
    padding: 0;
}

.content {
    width: 100%;
    height: 100% !important;
}

.content>div {
    float: left;
    padding: 10px;
}

.content>div>img {
    width: 400px;
}

Js：

  updated() {
        var elem = document.querySelector('.content');//图片父容器
        var msnry = new Masonry(elem, {
            // options
            itemSelector: '.content_one',//图片子容器
            // columnWidth: 200,         //列宽
        });
    },

本文如有错误或不当代码，可私信。