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

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

• 前言
• 官網(wǎng)
• 安裝與使用
• 基本使用
• • 示例
• 參數(shù)
• • item-selector
  • transition-duration
  • column-width
  • origin-left
  • origin-top
  • gutter
• 小結(jié)

前言

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

官網(wǎng)

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

安裝與使用

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

// 安裝 npm install vue-masonry -S

注意的是，vue-masonry沒有對應(yīng)的@types/vue-masonry

這也就代表vue-masonry 沒有對應(yīng)的類型描述，當(dāng)然，也不需要，即使你的項目是Vue3+TypeScript也不需要安裝類型描述文件，以Vue3+Ts的項目為例，當(dāng)安裝完成后，直接在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>

效果圖如下：

參數(shù)

item-selector

接收一個字符串作為參數(shù)，官方原文解釋：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

接收一個字符串作為參數(shù)，官方原文解釋：duration of transitions，作用是設(shè)定動畫改變的持續(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ù)時間，比如，當(dāng)父級容器的寬度尺寸發(fā)生變化了，理所當(dāng)然的里面的瀑布流布局也會隨之發(fā)生變化，所有基于瀑布流的DOM將要重新排布，這個排布的過程是動畫化的，這個動畫持續(xù)時間即這里設(shè)定的時間~

column-width

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

<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>

默認(rèn)情況下vue-masonry會以第一個元素的寬度作為默認(rèn)排序，也就是說如果第一個元素的非最小單位的基準(zhǔn)元素，那么整個瀑布流的布局都會亂，因此需要通過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的列寬為標(biāo)準(zhǔn)，因此，即使demo-1的寬度比demo-2的小

因此，這種情況下，我們就需要使用column-width指定基準(zhǔn)列寬，將column-width的值設(shè)定為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>

結(jié)果如下：

origin-left

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

<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，設(shè)置Y軸的排序方式，默認(rèn)從上往下排序，設(shè)定后可從下向上排序

<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，簡單的說，就是用來設(shè)置列寬，

具體效果可以看原文中的這個鏈接，說明的已經(jīng)非常詳細(xì)了：https://masonry.desandro.com/options.html#gutter，當(dāng)然由于這是在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>

小結(jié)

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

總結(jié)

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

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