SOURCE

var input = document.getElementsByTagName('input')[0];
var button = document.getElementsByTagName('button')[0];
var resultDiv = document.getElementById('result');

var stringArray = [],arrayLength,xPoint,yPoint,finallyArray,forward;
button.addEventListener('click',()=>{
    forward = 'right';
    xPoint = 0,yPoint = 0;
    finallyArray = [];
    stringArray = input.value;
    getWidthAndHeight();
    setFinallyArray();
    fullTheArray();
    display();
})
function getWidthAndHeight(){
    arrayLength = Math.ceil(Math.sqrt(stringArray));
}

function setFinallyArray(){
    for(var i = 0; i < arrayLength; i++){
        var tempArray = [];
        for(var j = 0; j < arrayLength; j++){
            tempArray.push({value:null,index:[i,j]})
        }
        finallyArray.push(tempArray);
    }
}

function fullTheArray(){
    console.log(stringArray,finallyArray);
    for(var i = 1; i <= stringArray; i ++){
        step(i);
    }
}

function step(fullText){
    console.log(xPoint,yPoint);
    finallyArray[xPoint][yPoint].value = fullText;
    switch (forward){
        case 'up':
            if(finallyArray[xPoint - 1] === undefined || finallyArray[xPoint - 1][yPoint].value != null){
                turnRight();
                forward = 'right';
                return false;
            }else{
                turnUp();
            }
            break;
        case 'down':
            if(finallyArray[xPoint + 1] === undefined || finallyArray[xPoint + 1][yPoint].value != null){
                turnLeft();
                forward = 'left';
                return false;
            }else{
                turnDown();
            }
            break;
        case 'left':
            if(finallyArray[xPoint][yPoint - 1] === undefined || finallyArray[xPoint][yPoint - 1].value != null){
                turnUp();
                forward = 'up';
                return false;
            }else{
                turnLeft();
            }
            break;
        case 'right':
            if(finallyArray[xPoint][yPoint + 1] === undefined || finallyArray[xPoint][yPoint + 1].value != null){
                turnDown();
                forward = 'down';
                return false;
            }else{
                turnRight();
            }
            break;
    }
}

function turnRight(){
    console.log('turnRight');
    yPoint++;
}

function turnDown(){
    console.log('turnDown');
    xPoint++;
}

function turnLeft(){
    console.log('turnLeft');
    yPoint--;
}

function turnUp(){
    console.log('turnUp');
    xPoint--;
}


function display(){
    $(resultDiv).css('width',50*arrayLength).empty();
    
    finallyArray.map((row,i)=>{
        row.map((col,j)=>{
            $(resultDiv).append('<div class="cell"><p>'+col.value+'</p><p>('+col.index.join(',')+')</p></div>')
        })
    })
}

<input type="text" value='25'/>
<button>填充</button>
<div id="result"></div>

#result{
    display:flex;
    flex-wrap:wrap;
}
.cell{
    width:48px;
    height:48px;
    border:solid 1px #ccc;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
p{
    margin:0;
}