vue边缘不规则照片墙/图片墙（附开场动画）
效果图：思路：在网上找不到符合的，所以就整理思路自己开发。后续会将代码封装至gitee，到时候再粘贴相应地址。整体：由于小块从四面八方聚集且呈不规则排列，这就想到了使用绝对定位来控制小块的位置。代码：<template><div class="wrap"><div class="headimg_wrap"><div class="hidden_wrap"&
·
效果图：
思路：
在网上找不到符合的，所以就整理思路自己开发。后续会将代码封装至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
0- 0
已为社区贡献1条内容
所有评论(0)