前端项目经验 —— vue项目中使用vue-masonry插件实现瀑布流

 npm下载vue-masonry插件：

npm i vue-masonry

 在mian.js中引入插件：

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

// 瀑布流插件
import { VueMasonryPlugin } from "vue-masonry";

const app = createApp(App);
app.use(VueMasonryPlugin);
app.mount("#app");

 使用方式：

<script setup>
// 实现随机颜色
const getRandomColor = () => {
  var r = Math.floor(Math.random() * 256); // 生成 0~255 之间的随机数
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`; // 拼接 RGB 字符串
};
</script>

<template>
  <div v-masonry class="container">
    <div
      v-masonry-tile
      v-for="(item, index) in 10"
      :class="['item']"
      :style="{
        height: parseInt(Math.random() * 200) + 'px',
        background: getRandomColor(),
      }"
      :key="index"
    >
      {{ index }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 80vw;
  box-sizing: border-box;

  > .item {
    min-height: 80px;
    width: 20%;
    margin-bottom: 10px;
    margin-left: 10px;
  }
}
</style>

效果展示：

注意事项：

使用该插件会有一定的兼容问题，在之前一个项目中，我在刚开始使用时不会有任何问题，但是后面的一次打包过程中报错，并且找了各种方式还是无法解决，所以无奈只能去掉这个瀑布流方案。