JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://ffr2013.sb-studio.co.uk/js/jquery.isotope.min.js"></script>
<script src="http://ffr2013.sb-studio.co.uk/js/jquery.imagesloaded.js"></script>
<div class="background-wrap">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="block-wrap">
    <div id="side-block-01" class="hidden"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
    <div class="grid-block opacity" data-hook="01"></div>
</div>

CSS

/*
RESETS ------------------------
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align:;
    background: transparent;
}
/*
RESETS END --------------------
*/
 .background-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.column {
    float: left;
    width: 150px;
    border-right: 1px solid black;
    height: 100%;
}
.side-block {
    width: 280px;
    height: 100%;
    margin-right: 21px;
    margin-bottom: 20px;
    cursor: pointer;
    background: blue;
}
.block-wrap {
    position: relative;
    width: auto;
    margin: 0 auto;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 50px;
}
.grid-block {
    width: 130px;
    height: 230px;
    margin-right: 21px;
    margin-bottom: 20px;
    cursor: pointer;
    background: red;
}
/*
ISOTOPE CONTENT ------------------
*/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
   ...

JavaScript

$(document).ready(function () {

    var $container = $('.block-wrap');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.grid-block, .side-block, .hidden',
            animationEngine: 'best-available',
            filter: '*:not(.hidden), .grid-block',
            masonry: {
                columnWidth: 151
            }
        });
    });

    $('.grid-block').click(function () {
        var alt = $(this).attr('data-hook');
        $(this).removeClass('opacity');
        $('.opacity').animate({
            opacity: "0.2"
        }, "slow");
        $('.side-block').removeClass('side-block').addClass('hidden');
        $('#side-block-' + alt).removeClass('hidden').addClass('side-block');

        $container.isotope();
        setTimeout(function () {
            $('.block-wrap').isotope('reLayout');
        }, 1000);
        setTimeout(function () {
            var blocks = $('.block-wrap').height() + 'px';
            $('.side-block').css('min-height', blocks);
            $('.block-wrap').isotope('reLayout');
        }, 1500);
    });

});


$(document).ready(function () {
    setTimeout(function () {
        $('.block-wrap').isotope('reLayout');
    }, 500);
});