JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://form.sb-studio.co.uk/js/jquery.isotope.min.js"></script>
<script src="http://form.sb-studio.co.uk/js/jquery.imagesloaded.js"></script>
<script src="http://form.sb-studio.co.uk/js/jquery.isotope.perfectmasonry.js"></script>
<div class="menus">
    <ul class="filter option-set filter-who" data-filter-group="who">
        <li data-filter-value="">Any</li>
        <li data-filter-value=".boys">Boys</li>
    </ul>
    <ul class="filter option-set filter-what" data-filter-group="what">
        <li data-filter-value="">Any</li>
        <li data-filter-value=".workshop">Workshop</li>
    </ul>
    <div class="filter option-set filter-why" data-filter-group="why">
        <select class="hello">
            <option value=".natural">Natural</option>
            <option value=".red">Red</option>
            <option value=".blue">Blue</option>
        </select>
    </div>
</div>
<div class="wrap">
    <div class="block workshop boys red">
        <div>workshop</div>
        <div>boys</div>
        <div>red</div>
    </div>
    <div class="block boys blue">
        <div>boys</div>
        <div>blue</div>
    </div>
    <div class="block workshop red">
        <div>workshop</div>
        <div>red</div>
    </div>
</div>
<div class="test"></div>
<div class="best"></div>

CSS

.menus {
    position: relative;
    width: 100%;
    height auto;
}
li {
    cursor: pointer;
}
.wrap {
    position: relative;
    width: auto;
    margin: 0 auto;
    margin-top: 60px;
}
.block {
    width: 100px;
    height: 100px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    background: orange;
}
.selected {
    background-color: 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;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

$(document).ready(function () {

    var $container = $('.wrap'),
        filters = {};

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.block',
            filter: '',
            animationEngine: 'best-available',
            layoutMode: "perfectMasonry",
            perfectMasonry: {
                columnWidth: 110,
                rowHeight: 110
            }
        });
    });

    $('.filter li, .hello').on("change keyup paste click", function () {
        var $this = $(this);
        var val = $this.val();

        var $optionSet = $this.parents('.option-set');

        // store filter value in object
        // i.e. filters.color = 'red'
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.attr('data-filter-value');

        // convert object into array
        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        $('.test').html(selector);
        return false;

    });

    $('.filter li').click(function () {
        var hello = $('.test').html();
        $('.best').html(hello);
    });

    $('.filter-who li').click(function () {
        $('.filter-who li').removeClass('selected');
        $(this).addClass('selected');
    });

    $('.filter-what li').click(function () {
        $('.filter-what li').removeClass('selected');
        $(this).addClass('selected');
    });

});