JSFiddle - React, Tailwind, and code Playground

by Illya Moskvin

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="https://rawgithub.com/cubica/isotope-sloppy-masonry/master/jquery.isotope.sloppy-masonry.js"></script>
<div id="main">
    <div id="confines">
        <div id="container"></div>
    </div>
    
</div>

CSS

#main {
    background: Grey;
    box-sizing: border-box;
    padding: 30px;
}

/* Not needed! Here to illustrate that items stay within the confines of the alloted space, as defined by #main with padding */
#confines {
    background: white;
}

/* The next three enties are the important part */
#container {
    margin: -5px;
}

.item {
    box-sizing: border-box;
    padding: 5px;
    
    /* sloppyMasonry.js */
    width: 20%;
}

.item-inner {
    background: DarkGrey;
}

JavaScript

$(function(){
    var $container = $('#container');
    
    for( i=0; i<20; i++){
        $container.append('<div class="item"/>');
    }
    
    $('.item').wrapInner( '<div class="item-inner"/>')
    $('.item-inner').each( function() {
        $(this).height( 50 + Math.random()*50 );
    });
    
    $container.isotope({
        itemSelector: '.item',
        layoutMode : 'sloppyMasonry'
    });
    
});