JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="js-bricks" data-scheme="[[2000,990],[[0,0,590,390],[600,0,390,590],[0,400,190,190],[200,400,390,190],[0,600,390,390],[400,600,590,390],[0,1000,390,190],[400,1000,190,190],[600,1000,390,590],[0,1200,590,390],[0,1600,390,390],[400,1600,590,390]]]">
                     
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    
</div>

CSS

.item {
 background: yellow;   
}

JavaScript

var initBricks = function() {
    var $init = $('.js-bricks');
    if ($init.length) {

        var $items = $init.find('.item'), initScheme = $init.data('scheme');

        $init.css({'position':'relative'});

        var counter = 0, subCounter = 0, subLine = 0;
        var param = initScheme[0], scheme = initScheme[1];
        $items.each(function(){
            var $this = $(this);
            $this.css({
                'position': 'absolute',
                'left':     scheme[counter][0],
                'top':      scheme[counter][1] + (subCounter * param[0]),
                'width':    scheme[counter][2],
                'height':   scheme[counter][3]
            });
            counter++; if (counter == scheme.length) {counter = 0; subCounter++; }
        });
        if ((counter > 0) && (counter < scheme.length)) { subLine = 1 }
        $init.css({'width':param[1],'height':param[0]*(subCounter + subLine)})
    }
};



initBricks();