JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<div id="arr"></div>
<br /><br />
<div id="result">0, 10, 1, 20, 11, 2, 30, 21, 12, 3, 31, 22, 13, 4, 32, 23, 14, 5, 33, 24, 15, 6, 34, 25, 16, 7, 35, 26, 17, 8, 36, 27, 18, 9, 37, 28, 19, 38, 29, 39, </div>

JavaScript

var rows = 4,
    cols = 10,
    getValue = function(x, y) {
        return (y * cols) + x;
    },
    addValue = function(x, y) {
        $("#arr").append(getValue(x, y) + ", ");
    },
    max = rows + cols - 1,
    updateRow = 0;

for(var i = 0; i < max; i++) {
    if(i >= rows)
        updateRow++;
    for(var x = 0; x <= i; x++) {
        //$("#arr").append(x + " " + (i - x) + "<br />");
        var row = (i - x),
            col = x;
        if(updateRow) {
            row = row - updateRow;
            col = col + updateRow;
        }
        if(col >= cols)
            break;
        if(row >= 0 && col >= 0)
            addValue(col, row);
    }
}