JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<a class="trigger" href="#">Change Layout</a>
<div class="container">    
    <div class="item">
        <div class="h1"></div>
    </div>
    <div class="item">
        <div class="h3"></div>
    </div>
    <div class="item">
        <div class="h2"></div>
    </div>
    <div class="item">
        <div class="h1"></div>
    </div><div class="item">
        <div class="h2"></div>
    </div><div class="item">
        <div class="h1"></div>
    </div><div class="item">
        <div class="h3"></div>
    </div><div class="item">
        <div class="h1"></div>
    </div><div class="item">
        <div class="h2"></div>
    </div>
    <div class="item">
        <div class="h3"></div>
    </div>
</div>

CSS

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { width:500px;}
.container.active {width:600px;}
.item {width: 25%; float:left; margin: 10px; }
.h1,.h2,.h3 {
    background:#333;
    padding:20px;
}

.h1 { height:50px; }
.h2 { height:200px; }
.h3 { height:300px; }

JavaScript

var $container = $('.container');
	
$container.packery({
    itemSelector: '.item',
    gutter: 0
});

$(".trigger").click(function(event) {			 
        $container.addClass('active');
		$container.packery();    
		return false;
	});