css实现瀑布流

最新推荐文章于 2024-05-17 09:23:32 发布

六加六呀

最新推荐文章于 2024-05-17 09:23:32 发布

阅读量132

点赞数

文章标签：瀑布流布局 CSS 图片展示作品场景

本文链接：https://blog.csdn.net/weixin_44761131/article/details/126399554

版权

<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: "场景",
  },
]