-
Notifications
You must be signed in to change notification settings - Fork 0
/
flip.html
106 lines (91 loc) · 2.95 KB
/
flip.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
.box {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
column-count: 4;
width: 400px;
height: 400px;
background-color: skyblue;
}
.item {
width: 22%;
height: 22%;
text-align: center;
line-height: 88px;
border-radius: 10px;
color: #333;
transition: transform 300ms linear;
}
</style>
</head>
<body>
<button>shuffle</button>
<button>reset</button>
<div class="box">
<div class="item" style="background-color: coral">1</div>
<div class="item" style="background-color: pink">2</div>
<div class="item" style="background-color: greenyellow">3</div>
<div class="item" style="background-color: orange">4</div>
<div class="item" style="background-color: lavender">5</div>
<div class="item" style="background-color: linen">6</div>
<div class="item" style="background-color: peru">7</div>
<div class="item" style="background-color: slategray">8</div>
<div class="item" style="background-color: teal">9</div>
<div class="item" style="background-color: steelblue">10</div>
<div class="item" style="background-color: lightblue">11</div>
<div class="item" style="background-color: plum">12</div>
<div class="item" style="background-color: mintcream">13</div>
<div class="item" style="background-color: floralwhite">14</div>
<div class="item" style="background-color: firebrick">15</div>
<div class="item" style="background-color: lightcyan">16</div>
</div>
<script type="text/javascript">
let shuffle = document.getElementsByTagName('button')[0];
let reset = document.getElementsByTagName('button')[1];
let items = document.getElementsByClassName('item');
let data = Array.from(items).map((item,index) => index);
let positionMap = [];
// 记住当前的位置
for(let item of items) {
positionMap.push({x:item.offsetLeft,y:item.offsetTop});
}
shuffle.onclick = function() {
// data.sort(() => .5 - Math.random());
let i = data.length;
let j;
while (--i) {
j = Math.floor(Math.random() * i);
[data[i],data[j]] = [data[j],data[i]];
}
data.forEach((item,index) => {
let prev = positionMap[item];
let next = positionMap[index];
let x = next.x - prev.x;
let y = next.y - prev.y;
items[item].style.webkitTransform = `translate(${x}px,${y}px)`;
})
}
reset.onclick = function() {
data = Array.from(items).map((item,index) => index);
data.forEach((item,index) => {
let prev = positionMap[item];
let next = positionMap[index];
let x = next.x - prev.x;
let y = next.y - prev.y;
items[item].style.webkitTransform = `translate(${x}px,${y}px)`;
})
}
</script>
</body>
</html>