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’

然后在你需要進行展示的組件中，創建一個生命周期，在里面寫入代碼，圖中的columnWidth看自己需求

在此附上源代碼快，文中只需要關注父容器和子容器的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, //列寬});},

本文如有錯誤或不當代碼，可私信。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。