希尔排序动画

最新推荐文章于 2023-01-07 20:04:54 发布

weixin_33885676

最新推荐文章于 2023-01-07 20:04:54 发布

阅读量212

点赞数

文章标签：数据结构与算法

原文链接：http://www.cnblogs.com/SharkChilli/p/10860298.html

版权

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport"
 6         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <style>
10     #root {
11       display: flex;
12       align-items: baseline;
13       position: relative;
14       margin: 0 auto;
15     }
16     #root > div {
17       flex: 1;
18       flex-wrap: nowrap;
19       min-width: 20px;
20       border-radius: 3px;
21       border: 1px solid gray;
22       position: absolute;
23       bottom: -600px;
24       cursor: pointer;
25       text-align: center;
26       transition: all .8s;
27     }
28     .active {
29       background-color: orange;
30     }
31     .moving {
32       background-color: #4fbef3;
33     }
34     .default {
35       background-color: #bbbbbb;
36     }
37   </style>
38 </head>
39 <body>
40 <div id="root"></div>
41 <script>
42   var baseArr = [7,32,18,12,8,33,25,22,13,14,11,6,19,3,10,49,31,48,21,26,37,51,15,36,41];
43   // 绘制棒状图
44   function draw(root, arr) {
45     let fragment = document.createDocumentFragment();
46     arr.map((item, index) => {
47       let dom = document.createElement('div');
48       dom.style.height = item * 10 + 'px';
49       dom.style.left = (index * 25) + 'px';
50       dom.setAttribute('id', index);
51       dom.setAttribute('class', 'default');
52       dom.innerText = item;
53       fragment.appendChild(dom)
54     });
55     root.innerHTML = '';
56     root.appendChild(fragment);
57   }
58   function myShell(arr) {
59     let N = arr.length;
60     let h = 1;
61     while (h < N / 3) {
62       h = h * 3 + 1
63     }
64     let time = 1;
65     while (h >= 1) {
66       for (let i = h; i < N; i++) {
67         for (let j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
68           (function(h,j) {
69             setTimeout(() => {
70               let prvDom = document.getElementById(`${j - h}`);
71               let nextDom = document.getElementById(`${j}`);
72               prvDom.setAttribute('class', 'moving');
73               nextDom.setAttribute('class', 'moving');
74               [nextDom.style.left, prvDom.style.left] = [prvDom.style.left, nextDom.style.left];
75               setTimeout(() => {
76                 prvDom.setAttribute('class', 'default');
77                 nextDom.setAttribute('class', 'default');
78               }, 800);
79               prvDom.setAttribute('id', `${j}`);
80               nextDom.setAttribute(`id`,`${j - h}`);
81             }, 1000 * time);
82           })(h,j);
83           [arr[j], arr[ j - h ]] = [arr[j - h], arr[j]];
84           time++;
85         }
86       }
87       h = Math.floor(h / 3);
88     }
89     console.log(arr)
90   }
91   const rootDom = document.getElementById('root');
92   draw(rootDom, baseArr);
93   setTimeout(() => {
94     myShell(baseArr);
95   }, 1000)
96 </script>
97 </body>
98 </html>

最近看了看基本的排序算法，简单的实现一个了希尔排序动画。

希尔排序是插入排序的一种优化排序。插入排序适用于小规模数组或部分有序数组的排序，当需要插入的元素距离很远的时候，那么就会需要移动很多步。希尔排序的思想是使指定间距的元素是有序的，这样移动的时候元素基本就不会出现一步一步从头移动到尾的情况。

本人技术有限，哪里有问题欢迎指正

转载于:https://www.cnblogs.com/SharkChilli/p/10860298.html

weixin_33885676

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
希尔排序动画

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, init...
复制链接

扫一扫