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);

        }

 

    }

 

})();