JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://isotope.metafizzy.co/css/style.css">
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://isotope.metafizzy.co/js/fake-element.js"></script>
<section id="content">
<section id="options">
<ul class="clearfix">
<li id="insertAfter"><a href="#insertAfter">Insert after the 3rd</a></li>
</ul>
</section>
<div id="container" class="clearfix">
<div class="element transition metal " data-symbol="Hg" data-category="transition" data-sort="10">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid" data-sort="20">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition" data-sort="30">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition" data-sort="40">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth" data-sort="50">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition" data-sort="60">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element...
JavaScript
$('body').addClass('demos');
$(function(){
var $container = $('#container');
$('#insertAfter a').click(function(){
var $newEl = $(fakeElement.create());
$newEl.attr('data-sort', 31)
$container.isotope('insert', $newEl);
return false;
});
$container.isotope({
itemSelector : '.element',
filter: '*',
getSortData : {
number : function($elem) {
return parseInt($elem.attr('data-sort'), 10);
}
},
sortBy : 'number'
});
});