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

之前在做項(xiàng)目時(shí)候，需要使用到瀑布流布局，在網(wǎng)上找了好久；一些文章要么內(nèi)容不全，要么就是坑；本文章只會(huì)教你怎樣快速上手，如果需要詳細(xì)的學(xué)習(xí)，請(qǐng)前往https://www.npmjs.com/package/vue-masonry，好；話不多說，上代碼：

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

2.然后在main中進(jìn)行引入，并且Use使用一下（如下圖）

3 之后在使用瀑布流組件內(nèi)引用
import Masonry from ‘masonry-layout’

然后在你需要進(jìn)行展示的組件中，創(chuàng)建一個(gè)生命周期，在里面寫入代碼，圖中的columnWidth看自己需求

在此附上源代碼快，文中只需要關(guān)注父容器和子容器的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, {// optionsitemSelector: '.content_one',//圖片子容器// columnWidth: 200, //列寬});},

本文如有錯(cuò)誤或不當(dāng)代碼，可私信。

總結(jié)

以上是生活随笔為你收集整理的瀑布流插件vue-masonry（使用和踩坑心得）适合Vue脚手架开发（适用于Vue2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。