JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<div id="container">
<div class="element">
<img src="http://lorempixel.com/g/450/250" />
</div>
<div class="element">
<img src="http://lorempixel.com/g/400/200" />
</div>
<div class="element">
<img src="http://lorempixel.com/g/200/200" />
</div>
<div class="element">
<img src="http://lorempixel.com/g/400/200" />
</div>
<div class="element">
<img src="http://lorempixel.com/g/200/200" />
</div>
<div class="element">
<img src="http://lorempixel.com/g/400/200" />
</div>
</div>
CSS
img {
display: block;
}
JavaScript
requirejs.config({
paths: {
'jquery': ['//code.jquery.com/jquery-1.11.1'],
//['//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery'],
'isotope': [
'//isotope.metafizzy.co/isotope.pkgd'],
'bridget': ['//raw.githubusercontent.com/desandro/jquery-bridget/master/jquery.bridget'],
shim: {
'isotope': ['jquery']
}
}
});
require(['isotope', 'jquery', 'bridget'], function (isotopeModule, $) {
console.log('isotopModule', isotopeModule);
var containerEl = $('#container');
console.log('containerEl', containerEl);
$.bridget('isotope', isotopeModule);
containerEl.isotope({
itemSelector: '.element',
layoutMode: "masonry",
masonry: {
columnWidth: 156,
gutterWidth: 5,
isOriginLeft: true
}
});
});