携程前端模拟排序动画

然后首先将待排序元素输出到界面

var arr = [5,4,8,9,6,5,4,12,3,6,7,8,56];

var container = document.querySelector(‘.container’);

var fragment = document.createDocumentFragment(); // 创建文档片段，尽量减少重绘和重排

var len = arr.length;

for(let i = 0; i < len; i++ ){

var node = document.createElement(‘div’);

node.className = ‘sort’;

node.id = i; // 这个后面移动位置的时候需要用到

node.style.left = i * 60 + ‘px’;

fragment.append(node);

}

container.append(fragment);

至此，把待排序元素先输出到页面上了。

然后开始处理排序，这里采用冒泡排序，正常的冒泡排序结构是这样的

for(let i = 0; i < len; i++){

for(let j = 0; j < len - i; j++){

if(arr[j] >= arr[j+1]){

// 这里使用了 ES6 的解构赋值，即交换两个元素的值

[arr[j],arr[j+1]] = [arr[j+1],arr[j]];

// 也可以这样

/*

var temp = arr[j];

arr[j] = arr[j+1];

arr[j+1] = temp;

*/

}

}

}

解构赋值还是很好用的，推荐使用结构赋值

那么我们要实现冒泡排序的动画该怎么办呢。

首先我们要获取交换的两个元素距离左边长度，然后交换这两个元素的位置，还记得我们之前给元素赋值了 ID 吗，我们可以通过 ID 来找到这两个元素。

var x = document.getElementById(j)

var y = document.getElementById(j+1);

// 这里同样采用解构赋值

[x.style.left,y.style.left] = [y.style.left,x.style.left];

// 记得 id 也要交换

[x.id,y.id]=[y.id,x.id];

至此，我们做完了该做的一切，但是直接把这段代码加入到冒泡排序里面的话那我们直接看到的就是排序完成的效果了，看不到中间的过程，那要怎么样才能看到排序的过程呢，这个时候我们可以使用 setTimeout。

冒泡部分的代码如下

var time = 1;

for(let i = 0; i < len; i++){

for(let j = 0; j < len - i; j++){

if(arr[j] >= arr[j+1]){

[arr[j],arr[j+1]] = [arr[j+1],arr[j]];

setTimeout(function(){

var x = document.getElementById(j)

var y = document.getElementById(j+1);

[x.style.left,y.style.left] = [y.style.left,x.style.left];

[x.id,y.id] = [y.id,x.id];

},time * 1000)

time++;

}

}

}

time 是为了让每次的效果都显示出来，如果只是 1000 的话，那么这个动画 1s 之内就会完成，如果不清楚可以复习一下事件循环的相关知识。

至此，代码结束

预览地址

全部代码