JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://expo.sb-studio.co.uk/js/jquery.masonry.js"></script>
<script src="http://www.liverpoolcraftbeerexpo.com/wp-content/themes/lcbe/js/jquery.imagesloaded.js"></script>
<script src="http://masonry-ordered.tasuki.org/jquery.masonry.ordered.js"></script>
<div class="grid-wrap">
    <div class="grid-block">
        <div class="content">
            <div class="block" id="click">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">1</div>
                <div class="hello"></div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">2</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">3</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">4</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">5</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">6</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <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 --------------------
*/
 .grid-wrap {
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 100px;
}
.grid-block {
    width: 24.8999999%;
    float: left;
    height: auto;
    background: orange;
    margin-bottom: 30px;
}
.grid-block .content {
    padding: 10px;
    padding-top: 0px;
}
.grid-block:nth-child(4n+1) .content {
    padding-left: 0px;
}
.grid-block:nth-child(4n+4) .content {
    padding-right: 0px;
}
.grid-block .content .block {
    position: relative;
    width: 100%;
    height: auto;
}
.grid-block .content .block img {
    position: relative;
    width: 100%;
    height: auto !important;
}
.grid-block .content .block .block-text {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: -15px;
    text-align: center;
    font-size: 20px;
}
.hello {
    position: relative;
    width: 100%;
    height: 100px;
    background: red;
    display: none;
}
@media only screen and (max-width: 500px) {
    .grid-block {
        width: 49.888888%;
    }
    .grid-block:nth-child(4n+1) .content {
        padding-left: 10px;
    }
    .grid-block:nth-child(4n+4) .content {
        padding-right: 10px;
    }
    .grid-block:nth-child(2n+1) .content {
        padding-left: 0px;
    }
    .grid-block:nth-child(2n+2) .content {
        padding-right: 0px;
    }
}
@media only screen and (max-width: 400px) {
    .grid-block {
        width: 100%;
    }
}

JavaScript

$(document).ready(function () {
        setTimeout(function () {
            $('.grid-wrap').masonry('reload')
        }, 1000);

        $('#click').click(function () {
            $('.hello').slideDown();
            setTimeout(function () {
                $('.grid-wrap').masonry('reload');
            }, 500);
        });

    });

    $(function () {

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

        $container.imagesLoaded(function () {
            $('.grid-wrap').masonry({
                itemSelector: '.grid-block',
                columnWidth: $container.width() / 4,
                isAnimated: true,
                layoutPriorities: {
                    shelfOrder: 1.21
                }

            });
        });

        // update columnWidth on window resize
        $(window).smartresize(function () {
            if ($(window).width() > 500) {
                $('.grid-wrap').masonry({
                    columnWidth: $('.grid-wrap').width() / 4
                });
            }
            if ($(window).width() < 500) {
                $('.grid-wrap').masonry({
                    columnWidth: $('.grid-wrap').width() / 2
                });
            }
            if ($(window).width() < 400) {
                $('.grid-wrap').masonry({
                    columnWidth: $('.grid-wrap').width() / 1
                });
            }
        });

    });