SOURCE

    window.onload = function() {
        var oBtn = document.getElementsByTagName('button')[0];
        var aDiv = document.getElementsByTagName('div');
        var arrColor = ['red', 'blue', 'green', 'pink'];
        var str = '';
        var num = 1;
        oBtn.onclick = function() {
            for (var i = 0; i < 11; i++) {
                str += '<div>' + i + '</div>';
            }
            document.body.innerHTML = document.body.innerHTML + str;
            var len = aDiv.length;
            if (num == 1) {
                for (var i = 0; i < len; i++) {
                    if (i < (len + 1) / 2) {
                        aDiv[i].style.top = 50 + ((len + 1) / 2 - 1 - i) * 50 + 'px';
                        aDiv[i].style.left = 10 + i * 50 + 'px';
                        aDiv[i].style.background = arrColor[i % 4];
                    } else {
                        aDiv[i].style.top = 50 + (i - 5) * 50 + 'px';
                        aDiv[i].style.left = 10 + i * 50 + 'px';
                        aDiv[i].style.background = arrColor[i % 4];
                    }
                }
            } else if (num == 2) {
                for (var i = 0; i < len; i++) {
                    if (i < (len + 1) / 2) {
                        aDiv[i].style.top = 50 + i * 50 + 'px';
                        aDiv[i].style.left = 10 + i * 50 + 'px';
                        aDiv[i].style.background = arrColor[i % 4];
                    } else {
                        aDiv[i].style.top = 50 + (i + (5 - i) * 2) * 50 + 'px';
                        aDiv[i].style.left = 10 + i * 50 + 'px';
                        aDiv[i].style.background = arrColor[i % 4];
                    }
                }
            } else if (num == 3) {
                alert(num);
            } else {
                alert(num);
            }
            num++;
        }


    }

<button id="btn1" style="display:block;">自动生成div</button>

<style>
        div {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            color: #fff;
            line-height: 50px;
            text-align: center;
        }