XJjpdM

index.html

<div class="container">
  <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-primary">
                <input type="radio" name="options" id="option4" class="showblue">Blue
            </label>
        </div>
    </div>
  </div>
  <div class="row" id="js-masonry">
    <div class="col-md-4 col-sm-6 col-xs-12 column red">
      <div class="box bg-danger">
        The Kite Runner is the first novel by Afghan-American author Khaled Hosseini.[1] Published in 2003 by Riverhead Books, it tells the story of Amir, a young boy from the Wazir Akbar Khan district of Kabul, whose closest friend is Hassan, his father's young Hazara servant. The story is set against a of guilt and redemption feature prominently in the novel,[3] with a pivotal scene depicting an act of violence against Hassan that Amir fails to prevent. The latter half of the book centers on Amir's attempts to atone for this transgression by rescuing Hassan's son over two decades later.
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column green">
      <div class="box bg-success">
        The Kite Runner is the first novel by Afghan-American author Khaled Hosseini.[1] Published in 2003 by Riverhead Books, it tells the story of Amir, a young boy from the Wazir Akbar Khan district of Kabul, whose closest friend is Hassan, his father's young Hazara servant. The story is set against a
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column blue">
      <div class="box bg-primary">
        The Kite Runner is the first novel by Afghan-American author Khaled Hosseini.[1] Published in 2003 by Riverhead Books, it tells the story of Amir, a young boy from the Wazir Akbar Khan district of Kabul, whose closest friend is Hassan, his father's young Hazara servant. The story is set against a of guilt and redemption feature prominently in the novel,[3] centers on Amir's attempts to atone for this transgression by rescuing Hassan's son over two decades later.
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column red">
      <div class="box bg-danger">
        test
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column blue">
      <div class="box bg-primary">
        The Kite Runner is the first novel by Afghan-American author Khaled Hosseini.[1] Published in 2003 by Riverhead Books, it tells the story of Amir, a young boy from the Wazir Akbar Khan district of Kabul, whose closest friend is Hassan, his father's young Hazara servant. The story is set against a of guilt and redemption feature prominently in the novel,[3] with a pivotal scene depicting an act of violence against Hassan that Amir fails to prevent. The latter half of the book centers on Amir's attempts to atone for this transgression by rescuing Hassan's son over two decades later.
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column green">
      <div class="box bg-success">
        The Kite Runner is the first novel by Afghan-American author Khaled Hosseini.[1] Published in 2003 by Riverhead Books, it tells the story of Amir, a young boy from the Wazir Akbar Khan district of Kabul, whose closest friend is Hassan, his father's young Hazara servant. The story is set against a
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column blue">
      <div class="box bg-primary">
        The Kite Runner is the first novel by Afghan-American author Khaled Hosseini.[1] Published in 2003 by Riverhead Books, it tells the story of Amir, a young boy from the Wazir Akbar Khan district of Kabul, whose closest friend is Hassan, his father's young Hazara servant. The story is set against a of guilt and redemption feature prominently in the novel,[3] centers on Amir's attempts to atone for this transgression by rescuing Hassan's son over two decades later.
      </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 column red">
      <div class="box bg-danger">
        test
      </div>
    </div>
  </div>
</div>

script.js

var container = jQuery('#js-masonry');
container.masonry();
var msnry = container.data('masonry');
if (typeof msnry != "undefined") {
	var columnWidth = msnry.columnWidth;
}

jQuery(window).resize(function() {
  if (jQuery(this).width() < 768) {
    containerWidth = jQuery( '#js-masonry' ).width()
	cols 	= 1;
	columnWidth = containerWidth /cols;
	// console.log("xs");
  }
  else if (jQuery(this).width() >= 768 && jQuery(this).width() < 992) {
    containerWidth = jQuery( '#js-masonry' ).width()
	cols 	= 2;
	columnWidth = containerWidth /cols;
	// console.log("sm");
  }
  else if (jQuery(this).width() >= 992) {
    containerWidth = jQuery( '#js-masonry' ).width()
	cols 	= 3;
	columnWidth = containerWidth / cols;
	// console.log("md");
  }
  container.masonry({
		'columnWidth' : columnWidth,
		'cols'		: cols
	});
  var msnryresize = container.data('masonry');
	
});

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);

});

style.css

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

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

XJjpdM.markdown

XJjpdM

Forked from Captain Anonymous's Pen NPRxzw.

A Pen by Tanbin Islam Siyam on CodePen.

License.