JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="wall">
    <div class="module">0</div>
</div>

CSS

#wall {
    width: 400px;
    height: 400px;
    background: #eee;
}

.module {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #9aa;
    border: 1px solid #fff;
    -webkit-box-sizing: border-box;
}

JavaScript

/* Lazy load edges */
var numModules = 64;
var modSize = 50;
var modLeft = 0, modTop = 0;
var modCount = 0;

for (i = 0; i < numModules-1; ++ i)
{
    var $mod = $('.module:eq(0)').clone().html(++modCount);

    modLeft += modSize;
    if (modLeft + modSize > $('#wall').width())
    {
        modLeft = 0;
        modTop += modSize;
    }
    $mod.css({
        left: modLeft,
        top: modTop
    }).appendTo('#wall');
}

// Force lazy load.. so.. not really lazy
$('#wall').on('click', function() {
    var $mod = $('.module:eq(0)').clone().html(++modCount);
    
    $('#wall').css({
        width: '+=50px',
        height: '+=50px'
    });
    
    $mod.css({
        left: '-25px',
        top: '-22px'
    }).appendTo('#wall');
});