排序展示效果

目的呢是做一个类似如图的样子 有意思就记录一下

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
// 生成一个长度为10的数组
const testArr = Array.from({length: 10}).map(()=> Math.round(Math.random() * 10));

// 一个冒泡排序?(大雾) 会返回每次的排序的移动方式 和 排序完之后的数组
function bubble(testArr) {
const arr = testArr.slice();
const operationList = [];
for(let i = 0; i < testArr.length; i++) {
for(let j = i + 1; j < testArr.length; j++) {
if(arr[i] > arr[j]){
[arr[i], arr[j]] = [arr[j], arr[i]]
// 记录了每次移动的方式
operationList.push({
from: i,
to: j,
array: arr.slice(),
})
}
}
}
return operationList;
}

var container = document.getElementById('container');
// 放入fragment统一插入 减少dom操作
var collect = document.createDocumentFragment('div');
var spanList = [];
for(let i = 0; i < testArr.length; i++) {
var span = document.createElement('span');
span.className = 'square';
span.innerText = testArr[i];
span.style.left = i * 40 + 'px';
spanList[i] = span; // 保存对各个span的引用
collect.appendChild(span);
}

container.appendChild(collect);

for(let j = 0; j < result.length; j++) { // 定时任务
setTimeout(function() {
const fromIndex = result[j].from;
const toIndex = result[j].to;
const tmp = spanList[toIndex].style.left;

spanList[toIndex].style.left = spanList[fromIndex].style.left;
spanList[fromIndex].style.left = tmp;
[spanList[toIndex], spanList[fromIndex]] = [spanList[fromIndex], spanList[toIndex]]
}, 1000 * j)//0.5秒动画 1秒延迟
}

配合上css的transition属性,就可以做到简单的动画效果啦

演示地址:点击查看
// 打开控制台 数据显示更清晰