直接插入排序的演示过程

代码源(我的仓库):
https://github.com/UnderADome/DataStructure/blob/master/%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F%E5%8F%8A%E5%85%B6%E6%BC%94%E7%A4%BA/%E7%9B%B4%E6%8E%A5%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F%E6%BC%94%E7%A4%BA.html

<!DOCTYPE html"> 
<html> 

<style><!-- 
body{margin:0;padding:0;}; 
#mop{position:relative;float:left;border:2px solid #f40;padding-left:300px;} 
.fac{width:25px;height:100px;float:left;list-style:none;position:absolute;bottom:100px;} 
.fac a{display:block;position:absolute;bottom:0;} 
--></style> 
<script><!-- 
window.onload = function(){ 
var mop = document.getElementById("mop"),frag = document.createDocumentFragment(); 
(function(){ 
var li , a; 
for(var i = 0; i < 25; i++){ 
li = document.createElement("li");//YI.newLi({className:"fac",id:"f" + i})[0]; 
li.className = "fac"; 
li.id = "f" + i; 
a = document.createElement("a"); 
li.appendChild(a); 
frag.appendChild( li ); 
} 
mop.appendChild(frag); 
})(); 
var facs = document.getElementsByTagName("li"), set = [], steps = []; 
jOne.each(facs,function(i){ 
var hsb="rgb(" +rand(0, 200)+","+ rand(50, 250) + ", " + rand(50, 200) + ")",// 
h = rand(100, 500); 
set.push(h); 
jOne.setStyle(this, {height:h + "px",left:i * 25+300}); 
jOne.setStyle(this.children[0], {background:hsb,width:"25px",height:h + "px"}); 
}); 
var queue = []; 
var bub = bubble(); 
bub.sort(set,queue); 
var dq = createDq(); 
dq.setDq(queue); 
dq.run(function(){ 
var reg = /(\:)|(\^)|(\-)/,arg = arguments[0],ids, elem1, elem2, 
ret = arg.match(reg); 
if(ret[1]){ 
ids = arg.split(/\:/); 
elem2 = document.getElementById("f" + ids[1]); 
dq.setCl( elem2.children[0] ); 
return; 
} 
if(ret[2]){ 
ids = arg.split(/\^/); 
elem1 = document.getElementById("f" + ids[0] ); 
if(ids[0] == ids[1]) return; 
var cl = dq.getCl(); 
if(elem1.children.length ){ 
elem1.removeChild(elem1.children[0]); 
elem1.appendChild(cl); 
}else{ 
elem1.appendChild(cl); 
} 
return; 
} 
if(ret[3]){ 
ids = arguments[0].split(/\-/); 
elem1 = document.getElementById("f" + ids[0] ); 
elem2 = document.getElementById("f" + ids[1] ); 
if(ids[0] == ids[1]) return; 
if(elem1.children.length){ 
elem1.removeChild(elem1.children[0]); 
elem1.appendChild(elem2.children[0]); 
}else{ 
elem1.appendChild(elem2.children[0]); 
} 
} 
}); 
}; 
function createDq(){ 
var dq = [], size = 0, cl; 
return { 
setDq:function(queue){ 
dq = queue; 
size = queue.length; 
}, 
queue:function(fn){ 
size ++; 
dq.push(fn); 
}, 
dqueue:function(){ 
size --; 
return dq.shift(); 
}, 
run:function(fn){ 
var me = this, timer; 
timer = setInterval(function(){ 
if(size <= 1){ 
clearInterval(timer); 
} 
fn.call(null,me.dqueue()); 
},100); 
}, 
setCl:function(elem){ 
cl = elem; 
}, 
getCl:function(){ 
return cl; 
} 
} 
} 
function bubble(){ 
var obs = []; 
return { 
addOb:function(ob){ 
obs.push(ob); 
}, 
sort:function(arr,q){ 
var len = arr.length, i = 1, j, t, cl; 
for(; i < len; i++){ 
t = arr[i]; 
q.push("clone:" + i); 
j = i ; 
while(j >0 && (t < (arr[j - 1]))){ 
q.push(j + "-" + (j - 1)); 
arr[j] = arr[j-1]; 
j--; 
} 
q.push(j + "^" + i); 
arr[j] = t; 
} 
}//sort 
}//return 
} 
var jOne = { 
each:function(obj,callback){ 
var i = 0,len = obj.length; 
for(var value = obj[0]; 
i < len && callback.call(value,i,value) !==false ; 
value = obj[ ++i ] ){}; 
}, 
setStyle:function(elem, opt){ 
var o, sty = elem.style; 
for(var o in opt){ 
sty[o] = opt[o] 
} 
} 
} 
function rand(a, b){ 
var ret = Math.random() * (b - a) + a; 
return ret >> 0; 
} 
//--></script> 
<ul id="mop"></ul> 
</html> 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值