這是一個沒有套路的前端博主，熱衷各種前端向的騷操作，經常想到哪就寫到哪，如果有感興趣的技術和前端效果可以留言～博主看到后會去代替大家踩坑的～
主頁: oliver尹的主頁
格言: 跌倒了爬起來就好～

《Vue插件》瀑布流插件vue-masonry的使用與踩坑記錄

• 前言
• 官網
• 安裝與使用
• 基本使用
• • 示例
• 參數
• • item-selector
  • transition-duration
  • column-width
  • origin-left
  • origin-top
  • gutter
• 小結

前言

之前其實有分享過一篇純CSS實現瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691，但純CSS實現的方案都不是比較好的方案，總歸有一些各式各樣的局限性，因此，有了本文，記錄分享一下vue中比較好用的一個瀑布流插件——vue-masonry，GitHub上將近600個star，個人推薦~
注意：以下vue-masonry相關分享與踩坑解決的問題版本為0.16.0；

官網

官網地址：https://masonry.desandro.com/，但文本的主要的信息來源來自于GitHub的README，地址如下：https://github.com/shershen08/vue-masonry#readme
有興趣的小伙伴可以自行瀏覽~當然插件本身可以適用于很多平臺，Vue僅僅是其中之一；

安裝與使用

由于是集成在Vue中的，絕大多數Vue都是基于Vue-Cli搭建的項目，script標簽這種…應該很少見吧，因此就不過多涉及了，以vue-cli為主，

// 安裝 npm install vue-masonry -S

注意的是，vue-masonry沒有對應的@types/vue-masonry

這也就代表vue-masonry 沒有對應的類型描述，當然，也不需要，即使你的項目是Vue3+TypeScript也不需要安裝類型描述文件，以Vue3+Ts的項目為例，當安裝完成后，直接在main.ts文件中引入即可，引入代碼如下：

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

常規(guī)，簡單的引入，即可正常使用；

基本使用

vue-masonry的使用核心在于自定義指令：v-masonry 和 v-masonry-tile，這個是整個瀑布流插件的使用核心，

<div v-masonry><div v-masonry-tile v-for="(item, index) in blocks"><!-- block item markup --></div> </div>

• v-masonry: 綁定在父級容器上；
• v-masonry-tile: 綁定在子級容器上；

示例

直接看個例子吧

<div v-masonry class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div> </div>

效果圖如下：

參數

item-selector

接收一個字符串作為參數，官方原文解釋：list element DOM item selector，作用是選擇哪些列作為瀑布流的列，比如：

<div v-masonry item-selector=".demo-2" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div> </div><script lang="ts" setup> import { Ref, ref } from "vue";const demoList: Ref<number[]> = ref([1, 2, 1, 3, 4]); </script>

示例中item-selector的值是".demo-2"，代表只有類名中包含.demo2的DOM，都會被拉入瀑布流的布局，如果不包含，那么依舊會按原來的規(guī)則進行布局；

transition-duration

接收一個字符串作為參數，官方原文解釋：duration of transitions，作用是設定動畫改變的持續(xù)時間，比如：

<div v-masonry transition-duration="0.2s" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div> </div>

這個屬性是動畫持續(xù)時間，比如，當父級容器的寬度尺寸發(fā)生變化了，理所當然的里面的瀑布流布局也會隨之發(fā)生變化，所有基于瀑布流的DOM將要重新排布，這個排布的過程是動畫化的，這個動畫持續(xù)時間即這里設定的時間~

column-width

接收一個字符串作為參數，官方原文解釋：element selector for column width. Can be a selector string or a number，簡單的說就是設定一個基準列寬，大致用法如下：

<div v-masonry column-width=".demo-1" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div> </div>

默認情況下vue-masonry會以第一個元素的寬度作為默認排序，也就是說如果第一個元素的非最小單位的基準元素，那么整個瀑布流的布局都會亂，因此需要通過column-width修改；
舉個例子吧，看一段代碼

<div v-masonry class="container"><div v-masonry-tile class="demo-2"></div><div v-masonry-tile class="demo-1"></div><div v-masonry-tile class="demo-1"></div> </div>

整個瀑布流布局的列寬會以demo-2的列寬為標準，因此，即使demo-1的寬度比demo-2的小

因此，這種情況下，我們就需要使用column-width指定基準列寬，將column-width的值設定為demo-1

<div v-masonry column-width=".demo-1" class="container"><div v-masonry-tile class="demo-2"></div><div v-masonry-tile class="demo-1"></div><div v-masonry-tile class="demo-1"></div> </div>

結果如下：

origin-left

官方原文解釋：set to group elements to the right instead of left by default，設置X軸的排序方式，默認從左往右排序，設定后可從右向左排序

<template><div v-masonry origin-left="false" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div></div> </template>

效果圖如下：

origin-top

官方原文解釋：set to group elements to the bottom instead of top by default，設置Y軸的排序方式，默認從上往下排序，設定后可從下向上排序

<template><div v-masonry origin-top="false" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div></div> </template>

效果圖如下：

gutter

官方原文解釋：specifies [horizontal space between item elements]. Can be a selector string or a number. (https://masonry.desandro.com/options.html#gutter). Set gutter to an Element or Selector String to use the outer width of the element，簡單的說，就是用來設置列寬，

具體效果可以看原文中的這個鏈接，說明的已經非常詳細了：https://masonry.desandro.com/options.html#gutter，當然由于這是在Vue中使用，因此還是要通過屬性的方式注入，比如

<template><div v-masonry gutter="10" class="container"><divv-masonry-tilev-for="(item, index) in demoList":class="`demo-${item}`":key="index"><div></div></div></div> </template>

小結

還有一些屬性，感覺不是太重要，因此有興趣的小伙伴可以自行嘗試，問題不大，接著，對比下來不難發(fā)現，純CSS用法還是非常撿漏的，如果真的是實用與項目中，除非是極其簡單的應用，可以考慮用純CSS實現，否則還是建議使用一些功能已經相對完善的第三方插件來幫助我們實現功能~

總結

以上是生活随笔為你收集整理的《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录的全部內容，希望文章能夠幫你解決所遇到的問題。

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