vue边缘不规则照片墙/图片墙（附开场动画）

已于 2022-05-11 16:10:13 修改
阅读量1.5k 收藏 5
点赞数 1
文章标签： vue.js 动画 javascript css 前端
于 2022-05-10 17:45:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/B_cherry/article/details/124633344
版权

效果图：
在这里插入图片描述
请添加图片描述
思路：
在网上找不到符合的，所以就整理思路自己开发。后续会将代码封装至gitee，到时候再粘贴相应地址。
整体：由于小块从四面八方聚集且呈不规则排列，这就想到了使用绝对定位来控制小块的位置。

代码：

<template>
  <div class="wrap">
    <div class="headimg_wrap">
      <div class="hidden_wrap">
      <div
        v-for="(item,index) in datalist"
        :key="index"
        :class="['headimg',animate?'anim':'']"
        ref="move">
        <div
        :class="[item.isbig?'img_style_big':'img_style']"
      />
      </div>
      </div>
    </div>
  </div>
</template>
<script>
export default{
	data() {
		return {
			timer: null,
			animate: false,
			datalist:[
				{ id: 0, isbig: false},
				{ id: 1, isbig: false},
				{ id: 2, isbig: false},
				{ id: 3, isbig: false},
				{ id: 4, isbig: false},
				{ id: 5, isbig: false},
				{ id: 6, isbig: false},
				{ id: 7, isbig: false},
				{ id: 8, isbig: false},
				{ id: 9, isbig: false},
				{ id: 10, isbig: false},
				{ id: 11, isbig: true},
				{ id: 12, isbig: false},
				{ id: 13, isbig: false},
				{ id: 14, isbig: false},
				{ id: 15, isbig: false},
				{ id: 16, isbig: false},
				{ id: 17, isbig: false},
				{ id: 18, isbig: false},
				{ id: 19, isbig: false},
				{ id: 20, isbig: false},
				{ id: 21, isbig: false},
				{ id: 22, isbig: false},
				{ id: 23, isbig: false},
				{ id: 24, isbig: false},
				{ id: 25, isbig: false},
				{ id: 26, isbig: false},
				{ id: 27, isbig: true},
				{ id: 28, isbig: false},
				{ id: 29, isbig: false},
				{ id: 30, isbig: false},
				{ id: 31, isbig: false},
				{ id: 32, isbig: false},
				{ id: 33, isbig: false},
				{ id: 34, isbig: false},
				{ id: 35, isbig: false},
				{ id: 36, isbig: false},
				{ id: 37, isbig: false},
				{ id: 38, isbig: false},
				{ id: 39, isbig: false},
				{ id: 40, isbig: false},
				{ id: 41, isbig: false},
				{ id: 42, isbig: false},
				{ id: 43, isbig: false},
				{ id: 44, isbig: false},
				{ id: 45, isbig: false},
				{ id: 46, isbig: false},
				{ id: 47, isbig: false},
				{ id: 48, isbig: false},
				{ id: 49, isbig: false},
				{ id: 50, isbig: false},
				{ id: 51, isbig: false},
				{ id: 52, isbig: false},
				{ id: 53, isbig: false},
				{ id: 54, isbig: false},
				{ id: 55, isbig: false},
				{ id: 56, isbig: false},
				{ id: 57, isbig: true},
				{ id: 58, isbig: false},
				{ id: 59, isbig: false},
				{ id: 60, isbig: false},
				{ id: 61, isbig: false},
				{ id: 62, isbig: false},
				{ id: 63, isbig: false},
				{ id: 64, isbig: false},
				{ id: 65, isbig: false},
				{ id: 66, isbig: false},
				{ id: 67, isbig: true},
				{ id: 68, isbig: false},
				{ id: 69, isbig: false},
				{ id: 70, isbig: false},
				{ id: 71, isbig: false},
				{ id: 72, isbig: false},
				{ id: 73, isbig: false},
				{ id: 74, isbig: false},
				{ id: 75, isbig: false},
				{ id: 76, isbig: false},
				{ id: 77, isbig: false},
				{ id: 78, isbig: false},
				{ id: 79, isbig: false},
				{ id: 80, isbig: false},
				{ id: 81, isbig: false},
				{ id: 82, isbig: false},
				{ id: 83, isbig: false},
				{ id: 84, isbig: false},
				{ id: 85, isbig: false},
				{ id: 86, isbig: false},
				{ id: 87, isbig: false},
				{ id: 88, isbig: false},
				{ id: 89, isbig: false},
				{ id: 90, isbig: false},
				{ id: 91, isbig: false},
				{ id: 92, isbig: false},
				{ id: 93, isbig: false},
				{ id: 94, isbig: false},
				{ id: 95, isbig: false},
				{ id: 96, isbig: false},
				{ id: 97, isbig: false},
				{ id: 98, isbig: false},
				{ id: 99, isbig: false},
				{ id: 100, isbig: false},
				{ id: 101, isbig: false},
				{ id: 102, isbig: false},
				{ id: 103, isbig: false},
				{ id: 104, isbig: false},
				{ id: 105, isbig: false},
				{ id: 106, isbig: false},
				{ id: 107, isbig: false},
				{ id: 108, isbig: false},
				{ id: 109, isbig: false},
				{ id: 110, isbig: false},
				{ id: 111, isbig: false},
				{ id: 112, isbig: false},
				{ id: 113, isbig: false},
				{ id: 114, isbig: false},
				{ id: 115, isbig: false},
				{ id: 116, isbig: false},
				{ id: 117, isbig: false},
				{ id: 118, isbig: false},
				{ id: 119, isbig: false},
				{ id: 120, isbig: false},
				{ id: 121, isbig: false},
				{ id: 122, isbig: false},
				{ id: 123, isbig: false},
				{ id: 124, isbig: false},
				{ id: 125, isbig: false},
				{ id: 126, isbig: false},
				{ id: 127, isbig: false},
				{ id: 128, isbig: false},
				{ id: 129, isbig: false},
				{ id: 130, isbig: false},
				{ id: 131, isbig: false},
				{ id: 132, isbig: false},
				{ id: 133, isbig: false},
				{ id: 134, isbig: false},
				{ id: 135, isbig: false},
				{ id: 136, isbig: false},
				{ id: 137, isbig: false},
				{ id: 138, isbig: false},
				{ id: 139, isbig: false},
				{ id: 140, isbig: false},
				{ id: 141, isbig: false},
				{ id: 142, isbig: false},
				{ id: 143, isbig: false},
				{ id: 144, isbig: false},
				{ id: 145, isbig: false},
				{ id: 146, isbig: false},
				{ id: 147, isbig: false},
				{ id: 148, isbig: false},
				{ id: 149, isbig: false},
				{ id: 150, isbig: false},
				{ id: 151, isbig: false},
				{ id: 152, isbig: false},
				{ id: 153, isbig: false},
				{ id: 154, isbig: false},
				{ id: 155, isbig: false},
				{ id: 156, isbig: false},
				{ id: 157, isbig: false},
				{ id: 158, isbig: false},
				{ id: 159, isbig: false},
				{ id: 160, isbig: false},
				{ id: 161, isbig: false},
				{ id: 162, isbig: false},
				{ id: 163, isbig: false},
			]
		}
	},
	methods: {
	// 动态效果初始化
		firstPosition() {
		// 眼不见心不烦
      		this.animate = false;
      		this.$refs.move.map((e,i)=> {
        		e.num = parseInt(Math.random() * (5 - 0 + 1) + 0)
      		})
		      this.$refs.move.map((e, i) => {
		        if (e.num == 0) {
		          e.style.marginLeft = -1000 + "px";
		          e.style.marginTop = -200 + "px";
		        }
		        if(e.num==1) {
		          e.style.marginLeft = 15000 + "px"
		          e.style.marginTop = 2000 + "px"
		        }
		        if(e.num==2) {
		          e.style.marginLeft = -1000 + "px"
		          e.style.marginTop = 5000 + "px"
		        }
		        if(e.num==3) {
		          e.style.marginLeft = 15000 + "px"
		          e.style.marginTop = -200 + "px"
		        }
		        if(e.num == 4) {
		          e.style.marginTop = -1000 + "px"
		          e.style.marginLeft = 8000 + "px"
		        }
		        if(e.num == 5) {
		          e.style.marginLeft = 8000 + "px"
		          e.style.marginTop = 8000 + "px"
		          }
		      });
		      this.animate = true
		      setTimeout(this.initPosition, 500);
    },
    // 进行定位操作
    initPosition() {
      this.animate = true;
      let n = 0;
      let smallpart = 0;
      let bigpart = 0;
      let widthnum = 0;
      let margintopnum = 0;
      let jishu = 0;
      let arr1 = [];
      // 不规则边缘
      // 上
      let mbnum = 0;
      let mtnum = 0;
      // 下
      let pbnum = 0;
      let ptnum = 0;
      let mb = [];
      let mt = [];
      // 左右
      let lb = [];
      let lt = [];
      // 左
      let leftnumb = 0;
      let leftnumt = 0;
      // 右
      let rightnumb = 0;
      let rightnumt = 0;

      let arrnext = [];
      let index = 0;
      let dif = Math.round((this.$refs.move.length - 93) / 8);
      let portraitnum = dif*3
      let transversenum = dif
      // 上下随机数
      for (let i = 0; i < portraitnum / 2 + 2; i++) {
        let rnd = parseInt(Math.random() * (17 - 0 + 1) + 0);
        if (this.checkArr(mb, rnd)) {
          i--;
        } else {
          mb.push(rnd);
        }
      }
      for (let i = 0; i < portraitnum - (portraitnum / 2 + 2); i++) {
        let rnd = parseInt(Math.random() * (17 - 0 + 1) + 0);
        if (this.checkArr(mt, rnd)) {
          i--;
        } else {
          mt.push(rnd);
        }
      }
      // 左右随机数
      for (let i = 0; i < 7; i++) {
        let rnd = parseInt(Math.random() * (7 - 0 + 1) + 0);
        if (this.checkArr(lb, rnd)) {
          i--;
        } else {
          lb.push(rnd);
        }
      }
      for (let i = 0; i < transversenum - 4; i++) {
        let rnd = parseInt(Math.random() * (7 - 0 + 1) + 0);
        if (this.checkArr(lt, rnd)) {
          i--;
        } else {
          lt.push(rnd);
        }
      }
      this.$refs.move.map((e, i) => {
        if (i < 93) {
          if (n == 0) {
            // 走第一排的逻辑
             e.style.marginLeft =
              296 + 98 * smallpart + 201 * bigpart + 5 * i + "px";
              // 如果是小图（这里选取范围是因为当时放的是图片，获取到的clientWidth有时会不固定）
            if (e.clientWidth >= 97 && e.clientWidth <= 100) {
              arr1.push(1);
              smallpart++;
            }else if (
              e.clientWidth >= 200 &&
              e.clientWidth <= 202
            ) {
            // 如果是大图（这里选取范围是因为当时放的是图片，获取到的clientWidth有时会不固定）
              arr1.push(2);
              bigpart++;
            }
            // 图片之间上下有5px的空隙
            margintopnum = (e.clientHeight + 5) * n;
            widthnum =
              parseInt(e.style.marginLeft.replace("px", "")-90) + e.clientWidth;
            if (widthnum >= 2054 && widthnum <= 2060) {
            // 一排18个小图的长度
              if (arr1.length != 18) {
                let difference = 18 - arr1.length;
                for (let i = 0; i < difference; i++) {
                // 不够18个补1
                  arr1.push(1);
                }
              }
              // 第一排结束
              n++;
              // 数据清零
              smallpart = 0;
              bigpart = 0;
              widthnum = 0;
            }
            e.style.marginTop =476+ margintopnum * n + "px";
          } else {
            // 上面是小图
            if (arr1[index] == 1) {
              // 自身是小图
              if (e.clientWidth >= 97 && e.clientWidth <= 99) {
                e.style.marginTop = 476+(98 + 5) * n + "px";
                e.style.marginLeft =
                  296 + 98 * smallpart + 201 * bigpart + 5 * jishu + "px";
                smallpart++;
                arrnext.push(1);
                index++;
              } else if (
                e.clientWidth >= 200 &&
                e.clientWidth <= 202
              ) {
                //自身是大图
                e.style.marginTop =476+ (98 + 5) * n + "px";
                e.style.marginLeft =
                  296 + 98 * smallpart + 201 * bigpart + 5 * jishu + "px";
                bigpart++;
                arrnext.push(2);
                index++;
                index++;
              }
            } else if (arr1[index] == 2) {
              // 上一个是大图
              // 自身是小图
              bigpart++;
              jishu++;
              smallpart++;
              e.style.marginTop = 476+(98 + 5) * n + "px";
              e.style.marginLeft =
                296 + 98 * (smallpart - 1) + 201 * bigpart + 5 * jishu + "px";
              arrnext.push(1, 1, 1);
              index++;
              index++;
            }
            jishu++;
            widthnum =
              parseInt(e.style.marginLeft.replace("px", "")-90) + e.clientWidth;
            if (widthnum >= 2054 && widthnum <= 2060) {
              let difference = 18 - arrnext.length;
              for (let i = 0; i < difference; i++) {
                arrnext.push(1);
              }
              arr1 = arrnext;
              arrnext = [];
              index = 0;
              n++;
              jishu = 0;
              smallpart = 0;
              bigpart = 0;
              widthnum = 0;
            }
          }
        }
        else if (i < 93 + portraitnum && i >= 93) {
          // 上
          if (i < 93 + portraitnum / 2 + 2) {
            e.style.marginTop = 270+98 + 5 + "px";
            e.style.marginLeft = 296 + (98 + 5) * mb[mbnum] + "px";
            mbnum++;
          } else {
            e.style.marginTop = "270px";
            e.style.marginLeft = 296 + (98 + 5) * mt[mtnum] + "px";
            mtnum++;
          }
        }
        else if (i < 93 + portraitnum * 2 && i >= 93 + portraitnum) {
          // 下
          if (i < 93 + (portraitnum * 2) / 2 + 5) {
            e.style.marginTop = 270+103 * 9 + "px";
            e.style.marginLeft = 296+ (98 + 5) * mt[pbnum] + "px";
            pbnum++;
          } else {
            e.style.marginTop = 270+103 * 8 + "px";
            e.style.marginLeft = 296+103 * mb[ptnum] + "px";
            ptnum++;
          }
        } else if (i < 93 + portraitnum * 2 + transversenum&& i >= 93 + portraitnum * 2) {
          if (i < 93 + portraitnum * 2+transversenum - 4) {
            e.style.marginLeft = "90px";
            e.style.marginTop = 270+103 * lt[leftnumt] + "px";
            leftnumt++;
          } else {
            e.style.marginLeft = "193px";
            e.style.marginTop = 270+103 * lb[leftnumb] + "px";
            leftnumb++;
          }
        } else {
          if (i > this.whData.length - 4) {
            e.style.marginTop = 270 + 103 * lb[rightnumb] + "px";
            e.style.marginLeft = 296 + 103 * 18 + "px";
            rightnumb++;
          } else {
            e.style.marginTop = 270 + 103 * lt[rightnumt] + "px";
            e.style.marginLeft = 296 + 103 * 19 + "px";
            rightnumt++;
          }
        }
      });
    },
    
	},
	mounted() {
		this.timer = setTimeout(this.firstPosition, 100);
	}
		
}
</script>
<style lang="less" scoped>
.wrap {
  background-color: "#1E90FF"
  display: flex;
  flex-direction: column;
  .headimg_wrap {
  	display: flex;
  	margin-top: -10px;
  	width: 2495px;
  	height: 1365px;
  	overflow: hidden;
  .hidden_wrap {
    margin-top: -200px;
    position: relative;
    width: 2465px;
    height: 1625px;
    overflow: hidden;
  }
  .headimg {
    position: absolute;
  }
  .img_style {
    width: 98px;
    height: 98px;
  }
  .img_style_big {
    width: 201px;
    height: 201px;
  }
}
.anim {
  transition: all 3s;
}
  }
</style>

弊端：代码质量确实不高，不能动态处理数据，大块放置位置不随机（但是可根据自己想法调节），灵活度不够等，但是满足需求足够了。
大家可以引用我的思路进行更改，同时欢迎大家对代码提出宝贵的建议。

金佳慧
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5瀑布流照片墙
02-22
不多说，很好看，很经典的一个HTML5照片墙源码。
解决Vue打包后访问图片/图标不显示的问题
01-19
大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示 的问题， 接下来，我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕，因为都是打包压缩过的css代码，不过没关系 ，关键字搜索url   检查该url路径是否匹配正确 对比后惊人发现！！！ 因此在url路径前添加../../就OK了， 但是 很麻烦，每次打包后都要进行二次加工吗？ 并不是！！！ 2.自动添加 ../../ 的方法 打开build/utils.js，检测 publicPath 值是否正确，自己配置成相应的即可！ if (options
纯CSS装饰画(给图片加画框)
lovegonghui的专栏
11-02 2633
共有12种装饰样式: 1、简单画廓 2、Mini图标 3、带文本画廓 4、弹出带文本的画廓 5、带纸片夹 6、Cork画板 7、图片标签 8、黑色艺术框 9、金色艺术框 10、水墨画 11、光晕画 12、整块木板画框 案例下载:
爱心背景特效
nqxcwl的专栏
11-05 519
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Happy Valentine's Day everyone...
图片墙的一种实现方式
PHP开发
01-25 1626
这里代码排版有点乱，欢迎大家看原文地址 原文地址：http://hi.baidu.com/niujiaming0819/item/92f279b3b8704a4dbb0e122f 最近浏览了一下百.度图.片，发现百.度图.片墙做的的确不错。自己也实现了一个桌面墙，在这里指说一下实现的方式吧。 其实，实现很简单，其原理如下： 1. 将页
3D动画效果照片墙demo
web前端学习部落22群
01-13 3138
Title              html,         body {             margin: 0;             padding: 0;             background-color: #29454d;             /*禁止文字被选中*/             -moz-user-select: none;      
VUE照片墙
一个前端工作者的博客
08-04 2852
标题组件介绍：该组件为照片墙组件，包括上传图片，删除图片，图片预览功能。组件需要引入vue和element（使用了element的字体图标） 属性如下: imgList:必须值、初始的图片渲染列表，Array width:单元图片的宽度值默认为100px，height：单元图片的宽度值默认为100px；Number right：照片墙右侧距离默认值10px,bottom:照片墙下侧距离默认值10px;Number color：上传区域的文本及边框颜色，默认值#66b1ff，支持颜色色值 size：上传区域
vue 简易照片墙
qq_28190039的博客
09-03 3283
部门平台首页弄个照片墙展示人员风采，组件代码如下： <template> <div class="photo"> <div class="container" v-for="(path, cl) in info"> <div :class="`box imgi ${status1} ${status2 + cl}` " ref="path"><img :src="path"></div> </
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
热门推荐
在写作的路上持续输出。
02-01 2万+
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
vue3 原生实现照片墙效果
weixin_46463849的博客
04-07 1362
实现的效果，因为产品需要照片下面更着展示图片的备注信息。开始用element照片墙组件出现了各种各样的问题，最后参考前辈的代码用原生实现效果。
Unity3D照片墙工程
09-18
Unity3D照片墙工程
vue将文件/图片批量打包下载zip的教程
01-18
vue将文件/图片批量打包下载 各种格式都可以,只要url能够打开或者下载文件即可. 1.通过文件的url,使用js的XMLHttpRequest获取blob 2.将blob压缩为zip 由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分...
Vue 进入/离开动画效果
08-28
主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
从沙盒开始学习Cesium（持续更新）
qq_36802917的博客
10-27 5393
1、设置Cesium3DTileStyle：通过3dTileset一些属性，编写条件使3dTileset变色 沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html 一些属性写法需要参考3D Tiles Styling language文档 扩展知识：vector向量 向量类型 vecn 包含n个float分量的默认向量； bvecn 包含n个bool分量的向量； ivecn 包含n个int分量的.
[BiYii.com]在线编辑图片,在线的Fireworks...
weixin_33802505的博客
09-07 52
初步实现功能，看图片 滤镜功能还没有实现，它的功能就是给图片创造一些艺术效果(这里先买个关子)，等出来了你就知道了。要说这个东西有什么用处，其实就是在线对图片进行一些简单的处理，比如：添加注释，修改尺寸，缩小，或者优化，改变图像格式等。比如，你看到一则新闻图片想放到自己的文章里面，为了说明意思，你可以直接在图片上添加一些文字，插图，符号或者进行一些艺术化处理，更加吸引人，也更能突出图片＆...
vue 点击动态展示不同的图片
weixin_45102212的博客
12-06 859
代码部分:可以用三目运算根据状态判断 <div class="svt-s mainSty-center"> <div class="svs hand" v-for="(item,val) in data" :key="val" @click="select(val)"> <img :src="item.status ? item.icons1 : item.icons" alt=""> <div class.
分享78个JS相册代码，总有一款适合您
zy0412326的专栏
02-08 3046
js
不规则区域响应点击事件
yy471101598的博客
09-30 1892
Android不规则点击区域，准确说是在视觉上不规则的图像点击响应区域分发。 我们以完成如下效果图为例子，说明该效果的实现： 就原理上讨论的话我认为有两种方式比较简单，一种是利用数学线性规划，另一种是通过像素颜色判断。当然两种都有使用的范围和优缺点，今天就只针对像素颜色判断进行讲解。我们把该例子做成4张图（也就是4个图层），每张图都只有一种颜色（准确说是一定范围的颜色），并且每张图的大小都是
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 331
vite.config.ts配置。
vue 图片墙滚动效果
09-01
Vue图片墙滚动效果可以通过以下几个步骤实现： 1. 安装Vue插件，如vue-carousel或者vue-awesome-swiper，这些插件可以帮助实现图片墙的滚动效果。 2. 在Vue组件中引入插件，并进行配置。根据插件的文档，可以设置滚动效果的样式、图片数量、滚动速度等参数。 3. 在Vue组件的模板中，使用插件提供的组件和指令，来创建图片墙的基本结构。通常是通过循环遍历图片列表，生成多个图片的元素，并设置合适的样式。 4. 在Vue组件的JavaScript部分，通过设置数据、计算属性和方法，来处理滚动效果的逻辑。例如，可以使用v-for指令在模板中动态生成图片元素，使用v-bind指令绑定滚动参数，使用v-on指令监听滚动事件。 5. 在Vue组件的样式部分，可以通过CSS或者使用插件提供的样式配置，来设置图片墙的样式和布局。可以设置图片元素的大小、间距、边框等属性，以及整个图片墙容器的宽高和背景颜色。 6. 最后，使用Vue CLI或者其他工具，打包和发布Vue项目，以供用户访问。在网页中即可看到图片墙的滚动效果。 综上所述，通过安装Vue插件、配置参数、生成模板和样式、处理逻辑，我们可以实现Vue图片墙的滚动效果。通过合适的参数设置和样式调整，可以使图片墙的滚动效果更加华丽和流畅。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值