<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排序动画演示</title>
<style>
.container {
height: 100px;
width: 800px;
position: relative;
margin: 50px auto;
text-align: center;
}
/* 采用绝对定位的理由:
* 绝对定位可以让元素脱离文档流,能够尽量减少重排,而且绝对定位的位置方便计算。
* 使用 fixed 也可以的。
*
* 动画的持续时间设置为 1s
*/
.sort {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid black;
transition: 1s;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
<script>
// 1.首先将待排序元素输出到界面
var arr = [5, 4, 8, 9, 6, 5, 4, 12, 3, 6, 7, 8, 56];
var len = arr.length;
var container = document.querySelector('.container');
var fragment = document.createDocumentFragment(); // 创建文档片段,尽量减少重绘和重排
for (let i = 0; i < len; i++) {
var node = document.createElement('div');
node.className = 'sort';
node.id = i; // 这个后面移动位置的时候需要用到
node.style.left = i * 60 + 'px';
node.innerHTML = arr[i];
fragment.append(node);
}
container.append(fragment);
// 采用冒泡排序
var time = 1;
for (let i = 0; i < len; i++) {
for (let j = len - 1; j > i; j--) {
if (arr[j - 1] > arr[j]) {
[arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
// 交换要交换位置的两个 dom 元素
swap(j - 1, j, time);
time++;
}
}
}
function swap(x, y) {
setTimeout(function() {
var xNode = document.getElementById(x)
var yNode = document.getElementById(y);
[xNode.style.left, yNode.style.left] = [yNode.style.left, xNode.style.left];
[xNode.id, yNode.id] = [yNode.id, xNode.id];
}, time * 1000)
}
</script>
</html>
携程前端第三题之模拟排序动画
最新推荐文章于 2024-05-12 23:59:28 发布