js 动画排序算法(选择排序,冒泡排序,归并排序)
日常开发过程中,我们最常使用到的算法就是排序算法,最常用的排序算法例如选择排序,冒泡排序,归并排序,快速排序,二叉排序,堆排序等,周末闲来无事,刚好回顾下这些算法,并将其中的选择排序,冒泡排序和归并排序，以动画的方式展示,话不多说,先上动画截图,在上代码
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;
//记录临时交换值
var swap;
var index=0;
function switchData()
{
min=index;
//选出最小值
for(var j=index+1;j<length;j++)
{
if(sortArray[min]>sortArray[j])
min = j;
}
//一次交换
swap=sortArray[index];
sortArray[index]=sortArray[min];
sortArray[min]=swap;
//动画排序过程
animationSort(sortArray,sumtotal,container);
index++;
if(index<=length)
setTimeout(switchData,200);
}
setTimeout(switchData,200);
},
/**
* 归并排序
* @param sortArray 排序数组
* @param sumtotal 数组总和
* @param container 容器
*/
mergeSort:function(sortArray,sumtotal,container)
{
function merge(begin,mid,end)
{
var newarray=[];
var cursor1=begin,cursor2=mid+1;
var end1=mid,end2=end;
var temp=0;
while((cursor1<=mid) && (cursor2<=end))
{
if(sortArray[cursor1]<sortArray[cursor2])
{
newarray[temp]=sortArray[cursor1];
cursor1++;
temp++;
}else if(sortArray[cursor1]>sortArray[cursor2])
{
newarray[temp]=sortArray[cursor2];
cursor2++;
temp++;
}
}
while(cursor1<=mid)
{
newarray[temp]=sortArray[cursor1];
cursor1++;
temp++;
}
while(cursor2<=end)
{
newarray[temp]=sortArray[cursor2];
cursor2++;
temp++;
}
var incre=0;
for(var i=begin;i<=end;i++)
{
sortArray[i]=newarray[incre];
incre++;
}
}
function mSort(begin,end)
{
var mid= ~~((begin+end)/2);
if(begin<end)
{
mSort(begin,mid);
mSort(mid+1,end);
merge(begin,mid,end);
//动画排序过程
animationSort(sortArray,sumtotal,container);
}
}
var begin=0;
var length=sortArray.length;
mSort(begin,length-1);
}
}
})();