JSFiddle - React, Tailwind, and code Playground
HTML
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/freewall/1.0.5/freewall.min.js"></script>
<div class="free-wall">
<div class="wallcell" data-delay="1" data-height="300" data-width="300" data-cellW=100 data-cellH=100 data-state="move" data-nested=".cellImage">
Brands
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/770467680012890112/kSz1jtnn.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/378800000224166791/b8d346a6b66796687a649763d6b91936.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/808733554574237696/0Ld_gdau.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/587131394096107520/4RFYgoKG.png"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/551878698152914944/JwmVmkeK.png"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/459373156919029760/kJ77xlgo.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/445427923554562048/dYJF3HXV.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
<div class='cellImage' style='background-image:...
JavaScript
$(function() {
$(".free-wall").each(function() {
var wall = new Freewall(this);
wall.reset({
selector: '.wallcell',
cellW: 300,
cellH: 300,
fixSize: 10,
gutterY: 20,
gutterX: 20,
onResize: function() {
wall.fitWidth();
}
});
wall.fitWidth();
});
$(window).trigger("resize");
});