用动画的方式显示排序

闲来无事，写了个排序算法；我的思路是将一组数据进行两两比较，如果前面的数大于后面的数，那么将它们交换一下位置；如此重复循环；

代码如下：

public String  test(){
    ArrayList<Integer> list= new ArrayList<Integer>();
    for(int k =0;k<11;k++){
        int a=(int)(Math.random()*100);
        list.add(a);
    }
    System.out.println(list);
    for(int j =0;j<list.size()-1;j++){
        for(int i =0;i<list.size()-1;i++){
            list.get(i);
            if(list.get(i)>list.get(i+1)){
                Integer order=list.get(i);
                list.set(i,list.get(i+1));
                list.set(i+1, order);
            }
        }
    }
    return "show";
}

但是这样还是感觉无聊，所以我想将数据显示出来，形成排序动画效果。

所以我将数据当做一个div高度的值，多少个数据就有多少个div;

后端：

@RequestMapping("qq.do")
public String aa(Map<String,Object> map){
    ArrayList<Integer> list= new ArrayList<Integer>();
    for(int k =0;k<200;k++){
        int li=0;
        list.add(li);
    }
    map.put("list",list);
    return "test1";
}

前端用到thymeleaf：

<div style="height: 100px;width: 100%">
    <div style="height: 100px;width: 100px;float: left"><button id="www">排序</button></div>
    <div style="height: 100px;width: 100px;float: left"><button id="eee">生成随机数</button></div>
</div>
<div style="height: 600px;width: 100%;">
<div th:each="user:${list}" style="height: 100px;width: 5px;background-color: #ff5722;float: left ; border:1px solid  black ;position:relative ;margin-top: 10px ;margin-bottom: 20px"><p style="font-size: 5px" ></div>
</div>

这样我们只需控制k的值就能获得不同数量的div

效果如下：

接下来就需要生成随机数；通过异步的方式生成，并将返回值设为div的高度

前端：

$("#eee").click(function() {
    var a=$("div").length
    $.ajax({
        type:"get",
        url:"test1.do",
        cache:false,
        dataType:"text",
        data:{"a":a},
        success:function (msg){
            ll=0;
            var pp=$.parseJSON(msg);
            for(var p=0;p<=pp.length;p++){
                $("div").eq(p+4).height(pp[p]);
            }
        }
    })
});

 后端：

@RequestMapping("test1.do")
@ResponseBody
public List<Integer> test1(Integer a){
    ArrayList<Integer> list= new ArrayList<Integer>();
    for(int k =0;k<a;k++){
        int li=(int)(Math.random()*500+1);
        list.add(li);
    }
    return list;
}

点击生成随机数的效果是这样的：

接下来，我们需要进行排序：

同样使用异步：

前端：

$("#www").click(function() {
        var hli=[];
        for(var z=0;z<$("div").length-4;z++){
            var height=$("div").eq(z+4).height();
            hli.push(height);
        }
        $.ajax({
            type:"post",
            url:"test2.do",
            cache:false,
            contentType : 'application/json;charset=utf-8', //设置请求头信息
            dataType:"json",
            data:JSON.stringify(hli),
            success:function (msg){
                for(var x=0;x<msg.length;x++){
                    $("div").eq(x+4).height(msg[x]);
                }
                    $("#www").trigger("click");//让异步不停地自动触发跳转
            }
        })
    });

 后端：

@RequestMapping("test2.do")
@ResponseBody
public List<Integer> test2(@RequestBody List<Integer> hli, HttpSession session){
    if(time==0){
        startTime = System.currentTimeMillis();
    }
    time=1;
    List<Integer> hli1=new ArrayList<>();
    for (int i=0; i<hli.size();i++){
        hli1.add(hli.get(i));
    }
    for(int j =0;j<hli.size()-1;j++){
        if(hli.get(j)>hli.get(j+1)){
            Integer order=hli.get(j);
            hli.set(j,hli.get(j+1));
            hli.set(j+1, order);
        }
    }
    if(hli.equals(hli1)){
        System.out.println("耗时：" + (System.currentTimeMillis() - startTime) + "ms");
        System.exit(0);
    }
    return hli;
}

最终运行代码就可以实现动画了；

排序显示