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- 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>
最近看了看基本的排序算法，简单的实现一个了希尔排序动画。
希尔排序是插入排序的一种优化排序。插入排序适用于小规模数组或部分有序数组的排序，当需要插入的元素距离很远的时候，那么就会需要移动很多步。希尔排序的思想是使指定间距的元素是有序的，这样移动的时候元素基本就不会出现一步一步从头移动到尾的情况。
本人技术有限，哪里有问题欢迎指正