我也研究下排序的动态展示
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>排序动态展示</title><style>#sortbox,sortbox_quick{position:relative;height:200px;margin-top:10px;}.tow{position:absolute;bottom:0px;width:10px;background-color:green; border-width:1px; border-style:solid; border-bottom-color:#aaa;border-right-color:#aaa; border-top-color:#ddd; border-left-color:#ddd; border-radius:3px;-moz-border-radius:3px; -webkit-border-radius:3px;}#show{font:14px/100% Arial; position:absolute; top:5px; right:5px; font-weight:bold; color:#feeef5; cursor:pointer; border:solid 1px #d2729e;background:#f895c2;background:-webkit-gradient(linear,left top,left bottom,from(#feb1d3),to(#f171ab));background:-moz-linear-gradient(top,#feb1d3,#f171ab);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');padding:3px 9px;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;box-shadow:0 1px 2px rgba(0,0,0,.2);text-shadow:0 1px 1px rgba(0,0,0,.3)}</style></head><body><div id="sortbox"></div><div id="sortbox_quick"></div><div id="show">show</div><script>var Dom = {get:function(id){return document.getElementById(id);}}var Sort = {randomArray:(function(){// 随即生成1到100的打乱的数组，这个算法是跟JK学习的，也算是一种洗牌算法，感觉不错，谢谢JKvar i,len = 100,oldsource = new Array(len);for(i=0;i < len ;i++){var random = Math.floor(Math.random()*(i+0.9999));oldsource[i] = oldsource[random];oldsource[random] = i+1;}return oldsource;}()),bubbleArray:[],init:function(){var sourcearray = this.randomArray,html = [],html_quick = [];for(var i = 0 , len = sourcearray.length ; i < len ; i ++){html.push('<div id="tow'+i+'" style="left:'+(10+1)*i+'px;height:'+2*sourcearray[i]+'px"></div>');html_quick.push('<div id="tow_quick'+i+'" style="left:'+(10+1)*i+'px;height:'+2*sourcearray[i]+'px"></div>');}Dom.get("sortbox").innerHTML = html.join("");Dom.get("sortbox_quick").innerHTML = html_quick.join("");Dom.get("show").onclick = function(){Sort.show()};},bubbleSort:function(array){var clonearray = array;var i = 0, len = clonearray.length,j, d,anim=[];for(; i<len; i++){for(j=0; j<len; j++){if(clonearray[i] < clonearray[j]){d = clonearray[j];clonearray[j] = clonearray[i];clonearray[i] = d;if( i != j)anim.push([i,j]);}}}return anim;},quickSort:function(array){//完全按照这种算法的说明写的，之前看到的这种代码实际上经过了一些小的修改，然后我改回来之后也方便了之后的动态展示var i = 0;var j = array.length - 1;var anim = [];var keyi = null,tt = null;var Sort = function(i, j){// 结束条件if(i == j ){ return };var key = array[i];keyi = i;var stepi = i; // 记录开始位置var stepj = j; // 记录结束位置while(j > i){// j <<-------------- 向前查找if(array[j] >= key){j--;}else{array[i] = array[j];var oldj = j;array[j] = key;keyi = j;anim.push([i,j]);//i++ ------------>>向后查找while(j > ++i){if(array[i] > key){array[j] = array[i];array[i] = key;keyi = i;//array[i] = key;anim.push([j,i]);break;}}}}// 如果第一个取出的 key 是最小的数if(stepi == i){Sort(++i, stepj);return ;}// 递归Sort(stepi, i);Sort(j, stepj);}Sort(i, j);return anim;},show:function(){var anim = this.bubbleSort((function(){var a = [];for(var i = 0 ; i < Sort.randomArray.length ; i++){a.push(Sort.randomArray[i]);}return a;})()),anim_quick = this.quickSort(Sort.randomArray);//for(var i = 0 , len = anim.length ; i < len ;){var i = 0,j = 0;var tt = setInterval(function(){if(anim_quick[j]){var tmp = parseInt(Dom.get("tow_quick"+anim_quick[j][0]).style.height);Dom.get("tow_quick"+anim_quick[j][0]).style.height = parseInt(Dom.get("tow_quick"+anim_quick[j][1]).style.height)+"px";Dom.get("tow_quick"+anim_quick[j][1]).style.height = tmp+"px";//console.log(i);j++;}else{clearInterval(tt);}},10);var t = setInterval(function(){if(anim[i]){var tmp = parseInt(Dom.get("tow"+anim[i][0]).style.height);Dom.get("tow"+anim[i][0]).style.height = parseInt(Dom.get("tow"+anim[i][1]).style.height)+"px";Dom.get("tow"+anim[i][1]).style.height = tmp+"px";//console.log(i);i++;}else{clearInterval(t);}},10);//}}}Sort.init();</script></body></html>