希爾排序動畫

時間 2019-12-12

標籤希爾排序動畫简体版

原文原文鏈接

 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>

最近看了看基本的排序算法，簡單的實現一個了希爾排序動畫。html

希爾排序是插入排序的一種優化排序。插入排序適用於小規模數組或部分有序數組的排序，當須要插入的元素距離很遠的時候，那麼就會須要移動不少步。希爾排序的思想是使指定間距的元素是有序的，這樣移動的時候元素基本就不會出現一步一步從頭移動到尾的狀況。算法

本人技術有限，哪裏有問題歡迎指正數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。