<div class="waterfall">
<div class="wf-item" v-for="(item,index) in imageUrl" :key="index">
<img :src="item.src">
</div>
</div>
样式
.waterfall{
column-count: 7;
column-gap: 20px;
//width: 960px;
margin: 0 auto;
.wf-item{
//margin-top: 10px;
border: 5px solid whitesmoke;
box-shadow: -2px 3px 5px rgba(0,0,0,0.5);
}
.wf-item img{
height: 100%;
width: 100%;
}
}
数据
imageUrl:[
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152322-15.jpg",
name: "我是",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152321-13.jpg",
name: "我是作品标题标题标题标",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152322-14.jpg",
name: "我是作品标标题标",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152321-12.jpg",
name: "22我是作品标题标题标题标22",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152320-10.jpg",
name: "我是作品",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152320-11.jpg",
name: "我是作品",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152318-8.jpg",
name: "我是作品标题标题",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152319-9.jpg",
name: "我是作品标题标题2222",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152300-7.jpg",
name: "2222我是作品标题标题",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152300-6.jpg",
name: "2222",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152320-11.jpg",
name: "我是作品",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152318-8.jpg",
name: "我是作品标题标题",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152319-9.jpg",
name: "我是作品标题标题2222",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152300-7.jpg",
name: "2222我是作品标题标题",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152300-6.jpg",
name: "2222",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152321-13.jpg",
name: "我是作品标题标题标题标",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152322-14.jpg",
name: "我是作品标标题标",
time: 1,
title: "场景",
},
{
src: "https://sucai.suoluomei.cn/sucai_zs/images/20201027152321-12.jpg",
name: "22我是作品标题标题标题标22",
time: 1,
title: "场景",
},
]