JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row" style="margin-top: 10px;">
    <div class="col-xs-12">
        <div class="col-xs-4 text-right" style="line-height: 34px;">Filtering options:</div>
        <div class="col-xs-8 text-left">
            <button class="btn btn-xl btn-primary sorter" data-filter="food">Food</button>
            <button class="btn btn-xl btn-primary sorter" data-filter="sports">Sports</button>
            <button class="btn btn-xl btn-primary sorter" data-filter="business">Business</button>
            <button class="btn btn-xl btn-primary sorter" data-filter="nature">Nature</button>
            |
            <button class="btn btn-xl btn-primary sorter" data-filter="*">All</button>
        </div>
    </div>
    <hr/>
    <div class="col-xs-12">
        <div class="col-xs-4 text-right" style="line-height: 34px;">Ordering options:</div>
        <div class="col-xs-8 text-left">
            <button class="btn btn-xl btn-primary orderer" data-order="asc">ASC</button>
            <button class="btn btn-xl btn-primary orderer" data-order="desc">DESC</button>
        </div>
    </div>
</div>
<hr/>

<ul id="sort-me">
    <li class="food" data-title="2" data-order="2" data-link="http://www.google.com/">
        <img src="http://lorempixel.com/200/200/food/1"/>
    </li>
    <li class="sports food business" data-title="5" data-order="5">
        <img src="http://lorempixel.com/200/200/sports/1"/>
    </li>
    <li class="sports" data-title="6" data-order="6">
        <img src="http://lorempixel.com/200/200/sports/3"/>
    </li>
    <li class="business" data-title="1" data-order="1">
        <img src="http://lorempixel.com/200/200/business/4"/>
    </li>
    <li class="food" data-title="4" data-order="4">
        <img src="http://lorempixel.com/200/200/food/5"/>
    </li>
    <li class="food" data-title="3" data-order="3">
        <img...

JavaScript

/*!
 jQuery.sdFilterMe v0.1
 (c) 2015 Steve David <http://www.steve-david.com>

 MIT-style license.
 */

;(function($) {

    $.fn.extend({
        sdFilterMe: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend({}, $.sdFilterMe.defaults, options);
            }

            if($(this).length == 1) {
                new $.sdFilterMe(this, options);
            }

            return this;
        }
    });

    $.layout = [];

    $.sdFilterMe = function(el, options) {
        var $el = $(el);

        $(window).on('load', function() {

            $el = $.sdFilterMe.buildLayout(el, options);
            $.layout = $.sdFilterMe.storeCoordinates($el);

            $(window).on('resize', function() {
                $.layout = $.sdFilterMe.storeCoordinates($el);
            });

            var $boxes = $el.find('> .sdfm-inner-wrapper');

            // Triggering events


            $(options.filterSelector).css('cursor', 'pointer').on('click', function(e) {
                e.preventDefault();
                $.sdFilterMe.filterBoxes($el, $(this).attr('data-filter'), options);
            });

            $(options.orderSelector).css('cursor', 'pointer').on('click', function(e) {
                e.preventDefault();
                $.sdFilterMe.sortBoxes($boxes, $(this).attr('data-order'), options);
            });

            if(options.hoverEffect) {
                $.sdFilterMe.hoverEffect($el, options);
            }
        });
    };

    $.sdFilterMe.buildLayout = function(el, options) {

        var $el = $(el)
            , $lis = $el.find('> li')
            , widths = []
            , heights = []
            , clones = []
            , maxWidth
            , maxHeight
            , outerWrapperId = 'sdfm-wrapper'
            , $outerWrapper = $('<div />')
                .attr('id', outerWrapperId)
                .css({
                    'vertical-align': 'top',
                   ...