**I have been drawing static pages recently, and there is a list of pictures,
The layout is very compact, the pictures have the same width and different heights,
But the renderings are all close together, I use ordinary v-for cycle plus css layout,
It will be based on the height of the tallest image in the row,
If the height of the image is small, the next line cannot be close together**
As shown in the picture:
But the effect I want is like this, as shown in the picture:
Relying on vue-masonry, some simple functions are realized. You can refer to this article for a more detailed description of the
usage and pit-stepping records of "Vue Plug-in" waterfall plug-in vue-masonry
npm install vue-masonry
in main.js
import {
VueMasonryPlugin } from "vue-masonry";
Vue.use(VueMasonryPlugin);
on the page to be used
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 part
.discover {
height: 100% !important;
}
.discoveImg {
float: left;
padding: 10px;
margin-right: 20px;
margin-bottom: 20px;
border-radius: 15px;
img {
width: 200px;
}
}
It worked out, I'm still happy