直接插入排序(Straight Insertion Sort)

最新推荐文章于 2022-07-03 12:53:05 发布
loveslmy
最新推荐文章于 2022-07-03 12:53:05 发布
阅读量457
点赞数
本文链接：https://blog.csdn.net/loveslmy/article/details/51182369
版权
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>直接插入排序(Straight Insertion Sort)</title>
    <link href="bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
    <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script>
        var left = 200;
        var eleWidth = 60;
        var marginWidth = 20;
        var size = 10;
        var eleTop = 300;
        var pop = 400;
        var middle = 150;
        function genNumArray() {
            var numArray = new Array(size);
            for (var i = 0; i < size; i++) {
                var num = Math.floor((Math.random() * 100));
                if (num == 0) {
                    num += 1;
                } else if (num == 100) {
                    num -= 1;
                }
                numArray[i] = num;
            }
            return numArray;
        }

        function insertSort(numArray) {
            for (var i = 1; i < numArray.length; i++) {
                var value1 = numArray[i];
                for (var j = i - 1; j > -1; j--) {
                    var value2 = numArray[j];
                    if (value2 > value1) {
                        numArray[j + 1] = value2;
                        numArray[j] = value1;
                    }
                }
            }
            console.log(numArray)
        }

        function oneLoop(start, end, numArray) {
            if (start < end) {
                var value = numArray[start];
                selectElement(start);
                moveElement(start, middle+"px", function () {
                    var secondIndex = start - 1;
                    secondLoop(value, start, secondIndex, end, null, numArray);
                });
            } else {
                console.log(numArray);
            }
        }

        function secondLoop(value1, i, j, end, id, numArray) {
            var value2 = numArray[j];
            selectElement(j);
            moveElement(j, middle+"px", function () {
                if (value2 > value1) {
                    numArray[j + 1] = value2;
                    numArray[j] = value1;
                    var e1 = $("#" + (j + 1));
                    var e2 = $("#" + j);
                    e1.attr("id", j);
                    e2.attr("id", (j + 1));
                    var e1Left = e2.offset().left + "px";
                    var e2Left = e1.offset().left + "px";
                    e1.animate({left: e1Left});
                    e2.animate({left: e2Left}, function () {
                        moveElement((j + 1), 400+"px", function () {
                            unSelectElement((j + 1));
                            if (j != 0) {
                                secondLoop(value1, i, (j - 1), end, j, numArray);
                            } else {
                                moveElement(j, 400+"px", function () {
                                    unSelectElement(j);
                                    oneLoop(i + 1, end, numArray);
                                });
                            }
                        });
                    });
                } else {
                    if (j != 0) {
                        moveElement(j, pop+"px", function () {
                            unSelectElement(j);
                            secondLoop(value1, i, (j - 1), end, id, numArray);
                        });
                    } else {
                        moveElement(j, pop+"px", function () {
                            unSelectElement(j);
                            if (id) {
                                moveElement(id, pop+"px", function () {
                                    unSelectElement(id);
                                    oneLoop(i + 1, end, numArray);
                                });
                            } else {
                                moveElement(i, pop+"px", function () {
                                    unSelectElement(i);
                                    oneLoop(i + 1, end, numArray);
                                });
                            }
                        });
                    }
                }
            })
        }

        function selectElement(id) {
            var e = $('#' + id);
            $(e).attr("class", "number-select");
        }

        function unSelectElement(id) {
            var e = $("#" + id);
            $(e).attr("class", "number");
        }


        function moveElement(id, top, callback) {
            var e = $("#" + id);
            if (!top) {
                top = e.offset().top + "px";
            }
            $(e).animate({top: top}, callback);
        }

        $(document).ready(function () {
            var numArray = genNumArray();
            var content = "";
            $(numArray).each(function (i) {
                content += '<div id="rectangle' + i + '"class="rectangle" style="left:' + (left + i * eleWidth) + 'px;top:'+eleTop+'px;"></div>';
            });
            $("body").html($("body").html() + content);

            $(numArray).each(function (i, item) {
                $("body").html($("body").html() + '<div id="' + i + '" class="number" style="z-index:9999;left:' + (left + i * eleWidth + marginWidth) + 'px;top:'+(eleTop+100)+'px;">' + item + '</div>')
            });

            $('#startBtn').click(function () {
                oneLoop(1, size, numArray);
            });
        });
    </script>
</head>
<body>
<h4 class="page-header">插入排序—直接插入排序(Straight Insertion Sort)</h4>
<dl>
    <dt>基本思想</dt>
    <dd>将一个记录插入到已排序好的有序表中，从而得到一个新记录数增1的有序表。即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。</dd>
    <dd>如果一个已有元素和插入元素是相等的，那么将把插入元素放在相等元素的后面。所以，相等元素的前后顺序没有改变，所以插入排序是<span style="font-weight:bold;color: red">稳定</span>的。</dd>
</dl>
<button id="startBtn">开始排序</button>
</body>
</html>