JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<div id="container">
    <div class="item w1 h2">Item</div>
    <div class="item w2 h1">Item</div>
    <div class="item w2 h1">Item</div>
    <div class="item w1 h2">Item</div>
    <div class="item w1 h1">Item</div>
    <div class="item w2 h2">Item</div>
    <div class="item w2 h2">Item</div>
    <div class="item w2 h1">Item</div>
    <div class="item w2 h1">Item</div>
    <div class="item w1 h2">Item</div>
    <div class="item w1 h1">Item</div>
    <div class="item w1 h1">Item</div>
    <div class="item w2 h2">Item</div>
    <div class="item w2 h2">Item</div>
    <div class="item w2 h1">Item</div>
    <div class="item w2 h1">Item</div>
    <div class="item w1 h2">Item</div>
    <div class="item w1 h1">Item</div>
</div>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#container {
    margin: 0 auto;
    max-width: 100%;
    width: 1360px;
}
.item {
    padding:20px;
    background:#333;
    float:left;
    margin:5px;
}
.w1 {
    width:49.999%;
}
.w2 {
    width:24.999%;
}
.h1 {
    height:100px;
}
.h2 {
    height:200px;
}
}

JavaScript

var $window = $(window);

var isPackeryEnabled = false;
var $container = $('#container');

function onResize() {
    var windowwidth = $window.width();
    var wasPackeryEnabled = isPackeryEnabled;
    isPackeryEnabled = $window.width() <= 600;
    // only enable or disable pac
    if ( isPackeryEnabled !== wasPackeryEnabled ) {
        if ( isPackeryEnabled ) {
            // enable packery
            $container.packery({
                itemSelector: '.item'
            });
        } else {
            // disable packery
            $container.packery('destroy');
        }
    
    }
}


$window.resize( onResize );
// trigger initially
onResize();