vue3 瀑布流 vue-masonry使用方法

npm install vue-masonry --save

main.js文件中引入

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

在页面中使用

<div
        v-masonry
        transition-duration="0.3s"
        item-selector=".item"
        :gutter="10"
>
        <div
          v-masonry-tile
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item.id)"
        >
          <!-- 你要渲染的图片啦，文字一类的代码块 -->
　　　　　　<!--这是vant组件，可以换成自己想要的代码-->
          <van-image
            width="100%"
            radius="12"
            show-loading
            show-error
            fit="cover"
            :src="item.imgurl"
          />
        </div>
</div>

<style lang="scss" scoped>

　　.item {
　　　　width: 48%;
　　　　position: relative;
　　　　border-radius: 12px;
　　　　margin-bottom: 18px;
　　　　min-height: 80px;


  　　　　.img {
    　　　　　　width: 100%;
    　　　　　　border-radius: 12px;
    　　　　　　display: block;
  　　　　}
　　}

</style>

属性：

1. transition-duration：过渡的持续时间；
2. item-selector：Dom项目选择器；
3. gutter：项目元素之间的水平间距；

官网地址：https://www.npmjs.com/package/vue-masonry