JavaScript排序

├── README.md ├── css └── sort.css ├── index.html └── js ├── animation.js ├── bubbleSort.js ├── insertSort.js ├── mergeSort.js ├── quickSort.js ├── quickSort2.js ├── selectSort.js └── shellSort.js /README.md: -------------------------------------------------------------------------------- 1 | # sortAnimation 2 | **JavaScript动画展示常见排序算法 2016年6月** 3 | 4 | 演示地址：http://runningls.com/demos/2016/sortAnimation 5 | 6 | 说明：http://blog.csdn.net/liusaint1992/article/details/51656124 7 | -------------------------------------------------------------------------------- /css/sort.css: -------------------------------------------------------------------------------- 1 | ul,li{ 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | input[type=button]{ 7 | cursor: pointer; 8 | } 9 | .sort_ul{ 10 | border: 1px solid #ccc; 11 | height: 350px; 12 | width: 1000px; 13 | 14 | } 15 | .sort_li{ 16 | float: left; 17 | width: 10px; 18 | height: 100%; 19 | margin-right: 3px; 20 | position: relative; 21 | } 22 | .sort_span{ 23 | width: 100%; 24 | display: block; 25 | height: 50%; 26 | background: #ddd; 27 | } 28 | .sort_span_blue{ 29 | background: black; 30 | } 31 | .sort_span_green{ 32 | background: green; 33 | } 34 | .sort_span_tag{ 35 | background: red; 36 | } 37 | .sort_span_in{ 38 | width: 100%; 39 | display: block; 40 | background: red; 41 | position: absolute; 42 | top: 0; 43 | 44 | } 45 | 46 | .sorting_btn{ 47 | background-color: green; 48 | color: #fff; 49 | border: 1px solid green; 50 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript排序 7 | 8 | 9 | 10 | 11 | 26 | 53 | 54 | 55 | 56 | 57 |

58 | 64 | 65 | 66 | 67 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /js/animation.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function SortAnimation(){ 4 | this.arrHis = []; 5 | this.timer = ''; 6 | this.sortName = 'bubble'; 7 | this.sortObj = { 8 | bubble:[bubbleSort,bubbleSortDom], 9 | insert:[insertSort,insertSortDom], 10 | select:[selectSort,selectSortDom], 11 | quick:[quickSort,quickSortDom], 12 | quick2:[quickSort2,quickSortDom2], 13 | merge:[mergeSort,mergeSortDom], 14 | shell:[shellSort,shellSortDom] 15 | };//目前拥有的排序方法。 16 | this.sort = this.sortObj[this.sortName][0]; 17 | this.sortDom = this.sortObj[this.sortName][1]; 18 | this.speed = 100; 19 | this.arr = [66,78,90,22,64,18,86,32,19,60,28,24,23,17,67,82,57,89,33,11,76,43,79,5,42,99,14,95,68,51,4,77,91,83,27,21,84,72,8,30,71,52,20,94,80,29,81,26,39,53]; 20 | this.arrLen = 50; 21 | this.sortRes = []; 22 | } 23 | 24 | 25 | SortAnimation.prototype = { 26 | pushHis:function(){ 27 | this.arrHis.push(arguments); 28 | }, 29 | startAnimation:function(){ 30 | var arrHis = this.arrHis; 31 | var that = this; 32 | this.timer = setInterval(function(){ 33 | if(arrHis.length>0){ 34 | that.sortDom(arrHis[0][0],arrHis[0][1],arrHis[0][2],arrHis[0][3],arrHis[0][4],arrHis[0][5],arrHis[0][6]); 35 | arrHis.shift(); 36 | }else{ 37 | that.initDom(that.sortRes); 38 | clearInterval(that.timer); 39 | } 40 | },this.speed); 41 | }, 42 | chagngeSort:function(arg){ 43 | if(arg && this.sortObj[arg]){ 44 | this.sort = this.sortObj[arg][0]; 45 | this.sortDom = this.sortObj[arg][1]; 46 | }else{ 47 | this.sort = this.sortObj['bubble'][0]; 48 | this.sortDom = this.sortObj['bubble'][1]; 49 | } 50 | }, 51 | createArr:function(num){ 52 | var arr = this.arr; 53 | arr.length = 0; 54 | this.arrLen = num || this.arrLen; 55 | for (var i = 0; i < this.arrLen; i++) { 56 | arr.push(getRandom(100)); 57 | } 58 | $("textarea[name=arr]").html(JSON.stringify(arr)); 59 | this.initDom(arr); 60 | }, 61 | addEvent:function(){ 62 | var that = this; 63 | $("form").click(function(event) { 64 | var target = event.target; 65 | if(target.type == 'button'){ 66 | var id = target.id 67 | if(id == 'createArr'){ 68 | var len = $("input[name=arrLen]").val(); 69 | that.createArr(len); 70 | }else if(id =='speedUp' || id == 'speedDown'){ 71 | that.changeSpeed(id); 72 | }else{ 73 | $(".sorting_btn").removeClass('sorting_btn'); 74 | $(target).addClass('sorting_btn'); 75 | that.chagngeSort(id); 76 | that.arrHis.length = 0; 77 | clearInterval(that.timer); 78 | that.sortRes = that.sort(that.arr); 79 | that.startAnimation(); 80 | } 81 | 82 | } 83 | }); 84 | }, 85 | changeSpeed:function(id){ 86 | if(id == 'speedUp'){ 87 | if(this.speed >=40){ 88 | this.speed = this.speed - 30; 89 | }else{ 90 | return; 91 | } 92 | } 93 | if(id == 'speedDown'){ 94 | if(this.speed < 500){ 95 | this.speed = this.speed + 30; 96 | }else{ 97 | return; 98 | } 99 | } 100 | clearInterval(this.timer); 101 | this.startAnimation(); 102 | }, 103 | init:function(){ 104 | this.addEvent(); 105 | this.initDom(this.arr); 106 | }, 107 | initDom:function(arr){ 108 | arr = arr || []; 109 | var html='',item= '',spanClass='',len = arr.length,i; 110 | for (i = 0; i '; 112 | html= html+item; 113 | } 114 | document.querySelector('.sort_ul').innerHTML = html; 115 | } 116 | 117 | } 118 | 119 | var s = new SortAnimation(); 120 | s.init(); 121 | 122 | function getRandom(n){ 123 | return Math.floor(Math.random()*n+1) 124 | } -------------------------------------------------------------------------------- /js/bubbleSort.js: -------------------------------------------------------------------------------- 1 | //冒泡排序将这一个跟下一个做比较，这一个比下一个大就交换位置。 2 | function bubbleSort(arr){ 3 | 4 | var resArr = arr.slice(),len=resArr.length,i=len-1,j,temp,sortOk; 5 | while(i--){ 6 | sortOk = true; 7 | for (j = 0; j < len-1; j++) { 8 | temp = resArr[j]; 9 | if(resArr[j+1]'; 30 | }else{ 31 | item = '

'; 32 | } 33 | html= html+item; 34 | } 35 | 36 | document.querySelector('.sort_ul').innerHTML = html; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /js/insertSort.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * arr:数组 4 | * a:当前已完成排序的数量。排序循环中的i。 5 | * b:当前在比较的位。循环中的j+1; 6 | * temp:当前比较的值; 7 | */ 8 | 9 | 10 | function insertSortDom(arr,a,b,temp){ 11 | 12 | var html='',item= '',spanClass='',len = arr.length,i; 13 | for (i = 0; i '; 22 | 23 | if(i == b){ 24 | item = '

'; 25 | } 26 | 27 | html= html+item; 28 | } 29 | 30 | document.querySelector('.sort_ul').innerHTML = html; 31 | 32 | } 33 | 34 | 35 | 36 | //插入排序： 37 | function insertSort(oriArr){ 38 | var arr = oriArr.slice(),i,j,len=arr.length,temp; 39 | 40 | for (i = 1; i < len; i++) { 41 | temp = arr[i]; 42 | for (j=i-1; j >-1; j--) { 43 | if(arr[j]>temp){ 44 | arr[j+1] = arr[j]; 45 | this.pushHis(arr.slice(),i-1,j+1,temp); 46 | }else{ 47 | break; 48 | } 49 | } 50 | arr[j+1] = temp; 51 | this.pushHis(arr.slice(),i,j,temp); 52 | } 53 | return arr; 54 | } 55 | 56 | -------------------------------------------------------------------------------- /js/mergeSort.js: -------------------------------------------------------------------------------- 1 | function mergeSort(oriArr){ 2 | var arr=oriArr.slice(),len= arr.length,gap=1,maxgap=len-1,gapArr=[],glen,n=0; 3 | var that = this; 4 | while(gaplen-1){//归并时后面一个数组的b可能超出数组。因为它是加的gap*2。这时要让这个b标识到整个数组最后一位去。 35 | b = len -1; 36 | } 37 | rn = b - a +1 - n; 38 | 39 | 40 | for (var i = a,j = a+n; n>0,i<=b,rn>0,j<=b; ) { 41 | 42 | if(arr[i]i;k--){ 50 | this.pushHis(arr.slice(),i,j,a,b,k,temp); 51 | arr[k] = arr[k-1]; 52 | } 53 | arr[i] = temp; 54 | j++; 55 | i++; 56 | rn--; 57 | this.pushHis(arr.slice(),i-1,j-1,a,b); 58 | continue ; 59 | } 60 | 61 | } 62 | 63 | 64 | } 65 | 66 | /* 67 | * arr:数组 68 | * a:左边数组比较到哪一位。 69 | * b:右边数组比较到哪一位。 70 | * c:标记本轮插入排序的开始位。 71 | * d:标记本轮插入排序的结束位。 72 | * tag:当前在对比的序号;循环中的k 73 | * temp:当前在找位的值; 74 | */ 75 | 76 | function mergeSortDom(arr,a,b,c,d,tag,temp){ 77 | var html='',item= '',len = arr.length,i; 78 | if(a == b){ 79 | a = a-1; 80 | } 81 | for (i = 0; i < len; i++) { 82 | 83 | spanClass = 'sort_span'; 84 | 85 | if(c<=i && i<=d){ 86 | spanClass += ' sort_span_blue'; 87 | } 88 | 89 | if(i == a || i==b){ 90 | spanClass += ' sort_span_green'; 91 | } 92 | 93 | if(tag && i == tag){ 94 | item = '

'; 95 | }else{ 96 | item = '

'; 97 | } 98 | html= html+item; 99 | } 100 | document.querySelector('.sort_ul').innerHTML = html; 101 | 102 | } 103 | -------------------------------------------------------------------------------- /js/quickSort.js: -------------------------------------------------------------------------------- 1 | //快速排序。给一个tag。比它小的放在左边的数组，比它大的放到右边的数组。然后左边数组和右边数组进行同样的操作，直到排序完成。这是用的递归实现。 2 | // a,b标记起始位 3 | 4 | function quickSort(arr,a,b,qArr){ 5 | 6 | var len = arr.length,leftArr=[],rightArr=[],tag,i,k,len_l,len_r,lb,ra,temp; 7 | if(a == undefined && b == undefined){ 8 | a = 0; b= arr.length-1;//初始化起始位置。 9 | } 10 | if(qArr == undefined){ 11 | qArr = arr.slice(); 12 | } 13 | 14 | if((len == 2 && arr[0] == arr[1])||len<2){ 15 | return arr; 16 | } 17 | 18 | tag = qArr[a]; 19 | 20 | for (i = 1; i < len;) { 21 | if(qArr[a+i]<=tag){ 22 | leftArr.push(qArr[a+i]); 23 | qArr[a+i-1] = qArr[a+i]; 24 | qArr[a+i] = tag; 25 | k = a+i; 26 | i++; 27 | }else{ 28 | if(leftArr.length+rightArr.length == len-1){ 29 | break; 30 | } 31 | temp = qArr[a+i]; 32 | qArr[a+i] = qArr[b-rightArr.length]; 33 | qArr[b-rightArr.length] = temp; 34 | rightArr.push(temp); 35 | k = a+i-1; 36 | } 37 | this.pushHis(qArr.slice(),a,b,k); 38 | } 39 | 40 | len_l = leftArr.length; 41 | len_r = rightArr.length; 42 | if(len_l== 0){ 43 | lb = a; 44 | }else{ 45 | lb = a+len_l -1; 46 | this.sort(leftArr,a,lb,qArr); 47 | } 48 | 49 | if(len_r == 0){ 50 | ra = b; 51 | }else{ 52 | ra = b + 1 - len_r; 53 | this.sort(rightArr,ra,b,qArr) 54 | } 55 | return qArr 56 | } 57 | 58 | 59 | /* 60 | * arr:数组 61 | * a:标记本轮插入排序的开始位。 62 | * b:标记本轮插入排序的结束位。 63 | * tag:当前在对比的序号;循环中的k 64 | */ 65 | function quickSortDom(arr,a,b,tag){ 66 | 67 | var html='',item= '',len = arr.length,i; 68 | for (i = 0; i < len; i++) { 69 | 70 | spanClass = 'sort_span'; 71 | 72 | if(a<=i && i<=b){ 73 | spanClass += ' sort_span_blue'; 74 | } 75 | 76 | if(i == tag){ 77 | spanClass += ' sort_span_tag'; 78 | } 79 | item = '

'; 80 | 81 | html= html+item; 82 | } 83 | document.querySelector('.sort_ul').innerHTML = html; 84 | } 85 | 86 | -------------------------------------------------------------------------------- /js/quickSort2.js: -------------------------------------------------------------------------------- 1 | //快速排序。给一个tag。比它小的放在左边的数组，比它大的放到右边的数组。然后左边数组和右边数组进行同样的操作，直到排序完成。这是用的递归实现。 2 | // a,b标记起始位 3 | 4 | function quickSort2(arr,a,b,qArr){ 5 | 6 | var len = arr.length,leftArr=[],rightArr=[],tag,i,j,k,temp,len_l,len_r,lb,ra; 7 | if(a == undefined && b == undefined){ 8 | a = 0; b= arr.length-1;//初始化起始位置。 9 | } 10 | if(qArr == undefined){ 11 | qArr = arr.slice(); 12 | } 13 | 14 | if(len<2){ 15 | return arr; 16 | } 17 | if(len == 2 && arr[0] == arr[1]){ 18 | return arr; 19 | } 20 | tag = qArr[a]; 21 | 22 | for (i = 1,k = 0; i < len;) { 23 | 24 | 25 | if(qArr[a+i]>=tag){ 26 | rightArr.push(qArr[a+i]); 27 | i++; 28 | 29 | }else{ 30 | temp = qArr[a+i]; 31 | for(j = a+i;j>a+k;j--){ 32 | 33 | qArr[j] = qArr[j-1]; 34 | // this.pushHis(qArr.slice(),a,b,a+k); 35 | } 36 | qArr[a+k] = temp; 37 | leftArr.push(temp); 38 | k++; 39 | i++; 40 | } 41 | this.pushHis(qArr.slice(),a,b,a+k,i-1); 42 | } 43 | 44 | 45 | len_l = leftArr.length; 46 | len_r = rightArr.length; 47 | if(len_l== 0){ 48 | lb = a; 49 | }else{ 50 | lb = a+len_l -1; 51 | this.sort(leftArr,a,lb,qArr); 52 | } 53 | 54 | if(len_r == 0){ 55 | ra = b; 56 | }else{ 57 | ra = b + 1 - len_r; 58 | this.sort(rightArr,ra,b,qArr) 59 | } 60 | return qArr; 61 | } 62 | 63 | 64 | /* 65 | * arr:数组 66 | * a:标记本轮插入排序的开始位。 67 | * b:标记本轮插入排序的结束位。 68 | * tag:当前中间值运行到哪一位i. 69 | * k:当前在对比的序号;当前对比到哪一位。 70 | */ 71 | 72 | 73 | function quickSortDom2(arr,a,b,tag,k){ 74 | 75 | var html='',item= '',len = arr.length,i; 76 | for (i = 0; i < len; i++) { 77 | 78 | spanClass = 'sort_span'; 79 | 80 | if(a<=i && i<=b){ 81 | spanClass += ' sort_span_blue'; 82 | } 83 | 84 | if(i == tag){ 85 | spanClass += ' sort_span_tag'; 86 | } 87 | if(i == a+k){ 88 | item = '

'; 89 | }else{ 90 | item = '

'; 91 | } 92 | 93 | html= html+item; 94 | } 95 | document.querySelector('.sort_ul').innerHTML = html; 96 | 97 | 98 | } -------------------------------------------------------------------------------- /js/selectSort.js: -------------------------------------------------------------------------------- 1 | //选择排序依次跟每一个比较求最小值。 2 | function selectSort(oriArr){ 3 | 4 | var arr = oriArr.slice(),i,j,k,len=arr.length,temp; 5 | for (i = 0; i < len-1; i++) { 6 | k=i; 7 | temp = arr[i]; 8 | for (j = i+1; j < len; j++) { 9 | if(temp>arr[j]){ 10 | temp = arr[j]; 11 | k = j; 12 | } 13 | this.pushHis(arr.slice(),i-1,j,k,temp); 14 | } 15 | arr[k] = arr[i]; 16 | arr[i] = temp; 17 | this.pushHis(arr.slice(),i); 18 | } 19 | return arr; 20 | } 21 | 22 | /* 23 | * arr:数组 24 | * a:当前已完成排序的数量。排序循环中的i。 25 | * b:当前在比较的位。循环中的j; 26 | * c:标记当前找到的最小位。循环中的k; 27 | * temp:当前找到的最小值; 28 | */ 29 | 30 | function selectSortDom(arr,a,b,c,temp){ 31 | 32 | var html='',item= '',spanClass='',len = arr.length,i; 33 | for (i = 0; i '; 46 | }else{ 47 | item = '

'; 48 | } 49 | 50 | html= html+item; 51 | } 52 | document.querySelector('.sort_ul').innerHTML = html; 53 | } 54 | -------------------------------------------------------------------------------- /js/shellSort.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * arr:数组 4 | * a:当前本轮已完成排序到哪一位。排序循环中的i。 5 | * b:当前在比较的位。循环中的j; 6 | * c:标记本轮插入排序的第一位。循环中的k。 7 | * temp:当前找到的最小值; 8 | * gap:当前排序的间隔; 9 | */ 10 | 11 | 12 | 13 | function shellSortDom(arr,a,b,c,temp,gap){ 14 | 15 | var html='',item= '',len = arr.length,i; 16 | 17 | for (i = 0; i < len; i++) { 18 | spanClass = 'sort_span'; 19 | 20 | if(c<=i &&((i-c)%gap == 0)){ 21 | spanClass += ' sort_span_blue'; 22 | } 23 | 24 | if(c<=i && i<= a && ((i-c)%gap == 0)){ 25 | spanClass += ' sort_span_green'; 26 | } 27 | 28 | if(i == b){ 29 | item = '

'; 30 | }else{ 31 | item = '

'; 32 | } 33 | html= html+item; 34 | } 35 | 36 | document.querySelector('.sort_ul').innerHTML = html; 37 | } 38 | 39 | 40 | 41 | function shellSort(oriArr){ 42 | var arr =oriArr.slice(),i,k,j,len=arr.length,gap = Math.ceil(len/2),temp; 43 | while(gap>0){ 44 | for (var k = 0; k < gap; k++) { 45 | for (i = k+gap; i < len; i=i+gap) { 46 | temp = arr[i]; 47 | for (j=i-gap; j >-1; j=j-gap) { 48 | if(arr[j]>temp){ 49 | this.pushHis(arr.slice(),i,j,k,temp,gap); 50 | arr[j+gap] = arr[j]; 51 | }else{ 52 | break; 53 | } 54 | } 55 | arr[j+gap] = temp; 56 | this.pushHis(arr.slice(),i,j+gap,k,temp,gap); 57 | } 58 | } 59 | gap = parseInt(gap/2); 60 | } 61 | return arr; 62 | } 63 | --------------------------------------------------------------------------------