? ? ? ? ?日常开发过程中,我们最常使用到的算法就是排序算法,最常用的排序算法例如选择排序,冒泡排序,归并排序,快速排序,二叉排序,堆排序等,周末闲来无事,刚好回顾下这些算法,并将其中的选择排序,冒泡排序和归并排序，以动画的方式展示,话不多说,先上动画截图,在上代码
1.截图部分
?2.代码
?实现思路:
?即在每进行一轮排序之后做页面渲染（每个数据对应一个颜色块）
/**.
?* User: lsj
?* Date: 14-4-2
?* Time: 下午3:13
?*/
var sortManager=(function (){
? ? //柱状总高度
? ? var HEIGHT_TOTAL=2000;
? ?//显示宽度
? ? var WIDTH_TOTAL=$(window).width();?
? ?//颜色数组
? ? var colorArray=['red','blue','grey','yellow','pink'];
? ? //生成bar
? ? function ?generateBar(data,index,sumtotal,lengthtotal,container)
? ? {
? ? ? ? var heightPercentage=data/sumtotal;
?
? ? ? ? var widthPer=(WIDTH_TOTAL-2*lengthtotal-20)/lengthtotal;
? ? ? ? //柱状高度
? ? ? ? var barHeight=HEIGHT_TOTAL* heightPercentage+"px";
? ? ? ? var barWidth= widthPer+"px";
? ? ? ? var color=colorArray[index%5];
? ? ? ? var bar=$("<div style='margin-bottom: 0;background:"+color+";float: left;margin-right:2px;width:"+barWidth+" ;height:"+barHeight+"'><input type='hidden' value='"+data+"'></div>")
?
? ? ? ? bar.mouseover(function(e){
? ? ? ? ? ?var data=$(this).find("input").val();
? ? ? ? ? ?var remind=$("<div class='remind' ?style='position: absolute;padding: 10px 15px;border-bottom: 1px solid #cccccc'>"+data+"</div>");
? ? ? ? ? ?var x=e.pageX;
? ? ? ? ? ?remind.css("left",x);
? ? ? ? ? ?var y= e.pageY;
? ? ? ? ? ?remind.css("top",y);
? ? ? ? ? ?$(document.body).append(remind);
? ? ? ? });
?
? ? ? ? bar.mouseleave(function(){
?
? ? ? ? ? ? ? ?$(document.body).find(".remind").remove();
?
? ? ? ? });
?
? ? ? ? //附加bar
? ? ? ? container.append(bar);
? ? }
? ? //动画排序结果
? ? function ?animationSort(sortArray,total,container)
? ? {
?
? ? ? ?//清空容器
? ? ? ? container.html("");
? ? ? ?var length= sortArray.length;
? ? ? ?for(var i=0;i<length;i++)
? ? ? ?{
? ? ? ? ? ?generateBar(sortArray[i],i,total,length,container);
? ? ? ?}
? ? }
?
? ? return{
? ? ? ? /**
? ? ? ? ?* 冒泡排序
? ? ? ? ?* @param sortArray
? ? ? ? ?*/
? ? ? ? bubleSort:function(sortArray,sumtotal,container)
? ? ? ? {
?
? ? ? ? ? ? var length=sortArray.length;
? ? ? ? ? ? var temp;
? ? ? ? ? ? var index=0;
? ? ? ? ? ? //一次冒泡
? ? ? ? ? ? function bubble()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? for(var j=0;j<length-index-1;j++)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(sortArray[j]>sortArray[j+1])
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? temp= sortArray[j];
? ? ? ? ? ? ? ? ? ? ? ? sortArray[j]=sortArray[j+1];
? ? ? ? ? ? ? ? ? ? ? ? sortArray[j+1]=temp;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //动画排序过程
? ? ? ? ? ? ? ?animationSort(sortArray,sumtotal,container);
? ? ? ? ? ? ? ?index++;
? ? ? ? ? ? ? ?if(index<length)
? ? ? ? ? ? ? ? ? ?setTimeout(bubble,200);
? ? ? ? ? ? }
?
? ? ? ? ? ? setTimeout(bubble,200);
? ? ? ? },
? ? ? ? //选择排序(外加动画效果)
? ? ? ? /**
? ? ? ? ?*
? ? ? ? ?* @param sortArray 数组
? ? ? ? ?* @param sumtotal 数组总和
? ? ? ? ?* @param container 动画容器(jQuery对象)
? ? ? ? ?*/
? ? ? ? chooseSort:function(sortArray,sumtotal,container)
? ? ? ? {
? ? ? ? ? ? var length=sortArray.length;
? ? ? ? ? ? //记录最小值下标
? ? ? ? ? ? var min;
? ? ? ? ? ? //记录
