Isotope-like filtering with Masonry and Bootstrap

Isotope and Masonry both are very popular grid libraries. But for the licensing issues you may not want to use isotope in all of your projects. Good thing is we can get some of the functionality with Masonry.

But at first lets make masonry work with bootstrap responsive layout. lets take some dummy elements like this.

<div class="container">
  <div class="row" id="js-masonry">
    <div class="col-md-3 col-sm-4 col-xs-6 column red">
      <div class="box bg-danger">
        dummy text
      </div>
    </div>
    ...
    <div class="col-md-3 col-sm-4 col-xs-6 column green">
      <div class="box bg-danger">
        dummy text
      </div>
    </div>
  </div>
</div>

Time for Masonry,

var container = jQuery('#js-masonry');
container.masonry();
var msnry = container.data('masonry');

Some responsive love for masonry,

if (typeof msnry != "undefined") {
    var columnWidth = msnry.columnWidth;
}

jQuery(window).resize(function() {
  if (jQuery(this).width() &lt; 768) {
    containerWidth = jQuery( '#js-masonry' ).width()
    cols     = 2; // We used col-xs-6, so 2 columns in xs screen
    columnWidth = containerWidth /cols;
    // console.log("xs");
  }
  else if (jQuery(this).width() &gt;= 768 &amp;&amp; jQuery(this).width() &lt; 992) {
    containerWidth = jQuery( '#js-masonry' ).width()
    cols     = 3; // We used col-xs-4, so 3 columns in sm screen
    columnWidth = containerWidth /cols;
    // console.log("sm");
  }
  else if (jQuery(this).width() &gt;= 992) {
    containerWidth = jQuery( '#js-masonry' ).width()
    cols     = 4; // We used col-xs-3, so 4 columns in xs screen
    columnWidth = containerWidth / cols;
    // console.log("md");
  }
  container.masonry({
        'columnWidth' : columnWidth,
        'cols'        : cols
    });
  var msnryresize = container.data('masonry');
});

Lets add some group buttons for filtering our dummy boxes.

<div class="row">
    <div class="col-xs-12 col-md-offset-3 col-md-6">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-warning active">
                <input type="radio" name="options" id="option1" class="showall" checked>All
            </label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option2" class="showred">Red
            </label>
            <label class="btn btn-success">
                <input type="radio" name="options" id="option3" class="showgreen">Green
            </label>
            <label class="btn btn-info">
                <input type="radio" name="options" id="option4" class="showblue">Blue
            </label>
        </div>
    </div>
  </div>

Adding some css to make it look good,

.box {
  border-radius: 4px;
  padding: 5px;
  margin-top: 15px;
}
.column {
  opacity:1;
}

.fadeout {
  transition: all .2s ease-in;
  opacity:0;
}

Now the main part,

jQuery(".showall").change(function(e){
    
    e.preventDefault();
    jQuery(".column").show();
  setTimeout(function() {
     jQuery(".column").removeClass("fadeout");
    }, 200);
    container.masonry({
        'columnWidth' : columnWidth
    });
    var msnryall = container.data('masonry');
    
});
jQuery(".showred").change(function(e){
    
    e.preventDefault();
    jQuery(".column").not(".red").addClass("fadeout");
  jQuery(".red").show();
  setTimeout(function() { jQuery(".column").not(".red").css("display","none");
    jQuery(".red").removeClass("fadeout");
    container.masonry({
      'columnWidth' : columnWidth
    });
       var msnryactive = container.data('masonry');
   }, 200);
    
});
jQuery(".showgreen").change(function(e){
    e.preventDefault();    jQuery(".column").not(".green").addClass("fadeout");
  jQuery(".green").show();
  setTimeout(function() { jQuery(".column").not(".green").css("display","none");
    jQuery(".green").removeClass("fadeout");
    container.masonry({
      'columnWidth' : columnWidth
    });
       var msnryactive = container.data('masonry');
   }, 200);
});
jQuery(".showblue").change(function(e){
    e.preventDefault();    jQuery(".column").not(".blue").addClass("fadeout");
  jQuery(".blue").show();
  setTimeout(function() { jQuery(".column").not(".blue").css("display","none");
    jQuery(".blue").removeClass("fadeout");
    container.masonry({
      'columnWidth' : columnWidth
    });
       var msnryactive = container.data('masonry');
   }, 200);

});

This is the final result.

See the Pen XJjpdM by Tanbin Islam Siyam (@potasiyam) on CodePen.