“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Recently, I participated in the development of a picture display website project. The design drawing adopts the display effect of waterfall flow, as shown below:

This problem can be achieved perfectly by using waterfall flow, and the image can be achieved perfectly by setting the width and height to be adaptive.

Here’s how to do it:

Step 1: Install dependencies

 npm i vue-waterfall2@latest --save
Copy the code

Step 2: import from main.js

import waterfall from 'vue-waterfall2'Vue.use(waterfall)
Copy the code

And you’re done!

Sample code:

<waterfall :col="4" :data="imgList">        <template>          <div class="list_item" v-for="item in imgList" :key="item.id">            <img              :src="item.cover"              class="cover"              width="100%"            />          </div>        </template>      </waterfall>
Copy the code

Hope to help more need small partners, good things to share!!