JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid-items">
    <div class="grid-item height200">
        <div></div>
    </div>
    <div class="grid-item height300">
        <div></div>
    </div>
    <div class="grid-item height100">
        <div></div>
    </div>
    <div class="grid-item height200">
        <div></div>
    </div>
    <div class="grid-item height200">
        <div></div>
    </div>
    <div class="grid-item height400">
        <div></div>
    </div>
    <div class="grid-item height300">
        <div></div>
    </div>
    <div class="grid-item height100">
        <div></div>
    </div>
    <div class="grid-item height300">
        <div></div>
    </div>
</div>

CSS

.grid-items {
    width: 100%;
}
.grid-item {
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
    width: 31%;
}
.grid-item div {
    background-color: red;
}
.height100 div {
    height: 100px;
}
.height200 div {
    height: 200px;
}
.height300 div {
    height: 300px;
}
.height400 div {
    height: 400px;
}
.alt div {
    background-color: blue;
}

JavaScript

$('.grid-items').masonry({
    itemSelector: '.grid-item',
    transitionDuration: 0
});

$('body').on('click', function(e) {
    e.preventDefault();
    
    var tpl = '<div class="grid-item alt height200"><div></div></div>';
    var items;
    for(var i = 0; i < 3; i++) {
        items = items ? items.add($(tpl)) : $(tpl);
    }
    console.log(items);
    $('.grid-items').append(items).masonry('appended', items);
});