JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<script src="http://195.8.58.56/~contact/js/jquery.imagesloaded.js"></script>
<script src="http://195.8.58.56/~contact/js/jquery.isotope.js"></script>
<div class="wrapper">
    <ul id="filters">
  <li><a href="#" data-filter="*">Todos</a></li>
  <li><a href="#" data-filter=".utilities">Utilities</a></li>
  <li><a href="#" data-filter=".telco">Telcos</a></li>
  <li><a href="#" data-filter=".banking">Banking</a></li>
  <li><a href="#" data-filter=".insurance">Insurance</a></li>
  <li><a href="#" data-filter=".retail">Retail</a></li>
  <li><a href="#" data-filter=".outros">Outros</a></li>
</ul>
<div id="container">
<div class="cliente insurance">
<img src="http://195.8.58.56/~contact/img/acoreana.png" alt="Açoreana Seguros" /></div>
<div class="cliente insurance">
<img src="http://195.8.58.56/~contact/img/advanceCare.png" alt="Advance Care" /></div>
<div class="cliente utilities">
<img src="http://195.8.58.56/~contact/img/affinity.png" alt="Affinity" /></div>
<div class="cliente insurance">
<img src="http://195.8.58.56/~contact/img/alico.png" alt="Alico" /></div>
<div class="cliente utilities">
<img src="http://195.8.58.56/~contact/img/ama.png" alt="Cliente" /></div>
<div class="cliente outros">
<img src="http://195.8.58.56/~contact/img/amb3e.png" alt="Amb3e" /></div>
<div class="cliente outros">
<img src="http://195.8.58.56/~contact/img/aon.png" alt="AON" /></div>
<div class="cliente utilities">
<img src="http://195.8.58.56/~contact/img/aVidaBela.png" alt="A Vida é Bela" /></div>
<div class="cliente banking">
<img src="http://195.8.58.56/~contact/img/barclaycard.png" alt="Barclaycard" /></div>
<div class="cliente banking">
<img src="http://195.8.58.56/~contact/img/bes.png" alt="Banco Espírito Santo" /></div>
<div class="cliente banking">
<img src="http://195.8.58.56/~contact/img/best.png" alt="Best" /></div>
<div class="cliente outros">
<img src="http://195.8.58.56/~contact/img/cat.png" alt="CAT" /></div>
<div class="cliente outros">
<img...

CSS

/**** Isotope Filtering ****/
#container{
    clear: both;
}
#filters{
margin: 0 auto;
    float: left;
}
.cliente{
width: 130px;
}
.cliente img{
width: 100%;
 display: block;   
}
.wrapper{
    width: 940px;
    margin: 0 auto;
}
.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;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, 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: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
#filters {
  padding-bottom: 1.0em;
}

#filters h3 {
  margin-bottom: 0.2em;
  font-size: 15px;
}

#filters h4 { 
  font-weight: bold;
}

#filters ul {
  margin: 0;
  list-style: none;
}

#filters ul ul {
  margin-left: 1.5em;
}

#filters li {
  float: left;
  margin-bottom: 0.2em;
}

#filters li a {
    text-decoration: none;
  display: block;
  padding: 0.4em 0.5em;
  background-color: #DDD;
  color: #222;
  font-weight: bold;
  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
  background-image:...

JavaScript

// modified Isotope methods for gutters in masonry
$.extend($.Isotope.prototype, {
    _getMasonryGutterColumns: function() {
        var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
        containerWidth = this.element.width();

        this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
        // or use the size of the first item
        this.$filteredAtoms.outerWidth(true) ||
        // if there's no items, use size of container
        containerWidth;

        this.masonry.columnWidth += gutter;

        this.masonry.cols = Math.floor((containerWidth + gutter) / this.masonry.columnWidth);
        this.masonry.cols = Math.max(this.masonry.cols, 1);
    },
    _masonryReset: function() {
        // layout-specific props
        this.masonry = {};
        // FIXME shouldn't have to call this again
        this._getMasonryGutterColumns();
        var i = this.masonry.cols;
        this.masonry.colYs = [];
        while (i--) {
            this.masonry.colYs.push(0);
        }
    },

    _masonryResizeChanged: function() {
        var prevSegments = this.masonry.cols;
        // update cols/rows
        this._getMasonryGutterColumns();
        // return if updated cols/rows is not equal to previous
        return (this.masonry.cols !== prevSegments);
    }

});

$(function() {
    var $container = $('#container');
    $container.bind('filterApplied', function(){
        $container.isotope({'filter' : '*'});
    });
    $container.imagesLoaded(function() {
        $container.isotope({
            itemSelector: '.cliente',
            layoutMode: 'masonry',
            masonry: {
                columnWidth: 130,
                gutterWidth: 10
            },
            onLayout: function($elems) {
                // `this` refers to jQuery object of the container element
                console.log($elems);
                // callback provides jQuery object of laid-out item elements
            }
   ...