瀑布流图片布局和鼠标滑过显示眼睛点击眼睛展示大图

最新推荐文章于 2024-09-09 12:23:47 发布

六加六呀

最新推荐文章于 2024-09-09 12:23:47 发布

阅读量98

点赞数

文章标签： vue.js javascript 前端

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

版权

这是一个关于前端开发的示例，展示了如何使用Vue.js创建一个图片瀑布流布局，并实现点击预览大图的功能。代码中包含了一个数据列表，每个条目包括图片源、标题和时间信息。当鼠标悬停在图片上时，会出现预览图标，点击可以查看大图。

摘要由CSDN通过智能技术生成

<div class="waterfall wf-content">
  <div class="wf-item" v-for="(item,index) in imageUrl" :key="index">
    <img :src="item.src">
    <div class="wf-item-t">我是标题我是标题我是标题</div>
    <div class="wf-item-x">
      <div class="wf-item-l">我是模板场景</div>
      <div >52分钟前</div>
    </div>
<!-- 预览大图功能-->
    <div class="wf-eye" @click="eyeShow(item.src)">
      <el-image
          src="src/assets/eye.png"
          fit="cover"
          :preview-src-list="url.img"
      />
    </div>
  </div>
</div>

<script lang="ts" setup>

import {reactive, ref} from 'vue'
let imageUrl = ref([
  {
    src: "https://z3.ax1x.com/2021/09/11/hzMhJ1.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://z3.ax1x.com/2021/09/11/hz8R8s.jpg",
    name: "我是作品标题标题2222",
    time: 1,
    title: "场景",
  },
  {
    src: "https://z3.ax1x.com/2021/09/11/hzMhJ1.jpg",
    name: "2222我是作品标题标题",
    time: 1,
    title: "场景",
  },
  {
    src: "https://z3.ax1x.com/2021/09/11/hz3Dk4.jpg",
    name: "2222",
    time: 1,
    title: "场景",
  },
  {
    src: "https://z3.ax1x.com/2021/09/11/hz84K0.jpg",
    name: "我是作品标题标题标题标",
    time: 1,
    title: "场景",
  },
  {
    src: "https://z3.ax1x.com/2021/09/11/hz3w0U.jpg",
    name: "我是作品标标题标",
    time: 1,
    title: "场景",
  },
  {
    src: "https://z3.ax1x.com/2021/09/11/hz8R8s.jpg",

    name: "22我是作品标题标题标题标22",
    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/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: "场景",
  },
])

//点击眼睛显示大图
const url = reactive({
  img:[]
})
const eyeShow = (src:string)=>{
  url.img.unshift(src)
}
</script>

<style scoped lang="scss">
.waterfall {
  column-count: 6;
  column-gap: 20px;
  margin: 0 auto;

  .wf-item {
    height: 100%;
    overflow: auto;
    border: 5px solid whitesmoke;
    box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.5);
    position: relative;
  }

  .wf-item img {
    max-width: 100%;
  }

  .wf-item-t {
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
  }

  .wf-item-x {
    display: flex;
    justify-content: space-between;
    color: #a09b9b;
    font-size: 12px;
  }
  .wf-item-l{
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  .wf-eye{
    position: absolute;
    top: 0;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: none;
  }
}

 .wf-item:hover .wf-eye{display: block;}

</style>