JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
Click on square
<div id="container">
    <div class="item">
        <p class="weight">33</p>
    </div>
    <div class="item">
        <p class="weight">22</p>
    </div>
    <div class="item">
        <p class="weight">3</p>
    </div>
    <div class="item">
        <p class="weight">2</p>
    </div>
    <div class="item">
        <p class="weight">9</p>
    </div>
    <div class="item">
        <p class="weight">1</p>
    </div>
</div>
<div class="some">
    <button class="button is-checked" data-sort-by="original-order">original order</button>
    <button class="button" data-sort-by="weight">weight</button>
</div>
<button class="buttonz">add icon</button>

CSS

.item {
    position:relative;
    width: 50px;
    height: 50px;
    background: #AAA;
    margin: 5px;
    float: left;
}
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
    b
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-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: 1s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
}
.cer {
    width: 50px;
    height: 50px;
    background: #AAA;
    margin: 5px;
    float: left;
}
/* End: Recommended Isotope styles */

JavaScript

var $container = $('#container').isotope({
    itemSelector: '.item',
    isResizeBound: false,
    masonry: {
        columnWidth: 20
    },
    getSortData: {
        weight: function (itemElem) {
            var weight = $(itemElem).find('.weight').text();
            return parseFloat(weight.replace(/[\(\)]/g, ''));
        }
    }
});

// bind sort button click
$('.button').click(function () {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({
        sortBy: sortByValue
    });
});

$(".buttonz").click(function () {
    $("#container").prepend($('<div class="item"><p class="weight">7</p></div>').fadeIn(2000)).isotope('reloadItems').isotope({
        sortBy: 'original-order'
    });
});


$("#container").on("click", ".item", function () {
  
    $(this).animate({ //moving image to center                                 
        position: "relative",
        left: "200px",
        top: "200px",
        zIndex: "55"

    }, 1200, function () {
        $(this).animate({                                
            position: "relative",
            left: "0px",
            top: "0px",
            zIndex: "55"
        });
    });})