Logo

【瀑布流插件】vue-masonry

photo

2024年04月08日

**最近一直在画静态页面,有个图片列表,

布局很紧凑,图片宽度一样,高度不一样,

但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局,

它会以这一行最高的那张图片的高度为准,

导致图片高度小的,下一行不能紧挨在一起**

如图:
在这里插入图片描述

但是我要的效果是这样的,如图:

在这里插入图片描述

依靠vue-masonry,实现了一些简单的功能,可参考这篇文章,讲的比较详细
《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录

npm install vue-masonry

在main.js里

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

在要用到的页面

import Masonry from "masonry-layout";
 <div class="discover" v-masonry>
        <div
          v-for="(v, ix) in discoverImg"
          :key="ix"
          class="discoveImg"
          v-masonry-tile
        >
          <img :src="v.img" alt="" />
        </div>

css部分

.discover {
    height: 100% !important;
  }
  .discoveImg {
    float: left;
    padding: 10px;

    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    img {
      width: 200px;
    }
  }

效果实现了,还是挺开心的

本文为原创文章,请注意保留出处!

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1848 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1822 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,705 作者:Pastore Antonio
1550 浏览量
configure: error: Package requirements (oniguruma) were not met configure:error:Packagerequirements(oniguruma)...configure:error:Packagerequirements(oniguruma)werenotmet 作者:Pastore Antonio
1548 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1535 浏览量