cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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-info">
                <input type="radio" name="options" id="option4" class="showblue">Blue
            </label>
        </div>
    </div>
  </div>
  <div class="row" id="js-masonry">
    <div class="col-md-3 col-sm-4 col-xs-6 column red">
      <div class="box bg-danger">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque, turpis sit amet iaculis cursus, mi enim dignissim mi, quis tincidunt mi quam sit amet diam. Phasellus massa massa, ullamcorper at ligula eu, malesuada tincidunt massa. Maecenas vestibulum faucibus lectus, suscipit commodo magna aliquet a. Curabitur diam sem, mattis finibus ligula vel, pretium malesuada metus. Suspendisse vehicula feugiat cursus. Mauris sapien nunc, porta a ipsum sit amet, varius ornare nulla. Phasellus non lobortis eros, eu laoreet augue.
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column green">
      <div class="box bg-success">
        Praesent dictum eros ante, et finibus ipsum fermentum et. Mauris posuere, sapien et ultricies aliquam, erat purus vestibulum dolor, mollis accumsan arcu purus ut nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus id nisi faucibus, lacinia sem eu, malesuada magna. Phasellus tristique risus sit amet libero cursus tempor. Ut vulputate viverra convallis. Vivamus vel nisi sit amet velit bibendum auctor. Curabitur dignissim dui at tincidunt mattis. Praesent in sem eu nisl volutpat convallis rutrum vitae eros. Duis vel commodo eros, quis pulvinar ante. Sed euismod turpis mauris, vel mattis est egestas eu. Sed a arcu ac arcu pharetra eleifend. Nam commodo convallis volutpat. Praesent eu dictum ante, eget scelerisque magna.
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column blue">
      <div class="box bg-info">
        Sed et nibh tincidunt, fermentum nisi eu, consequat quam. Nullam volutpat orci sed dolor efficitur consectetur. Quisque semper nisl euismod eros pulvinar, in luctus sem ullamcorper. Phasellus ultrices dignissim odio, quis dapibus urna consectetur id. Pellentesque venenatis turpis sed nunc convallis, nec fermentum arcu hendrerit. Maecenas vestibulum lacinia lacinia. Donec ultricies cursus varius. Aenean auctor rutrum mollis. Etiam gravida quis justo quis elementum. 
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column red">
      <div class="box bg-danger">
        Phasellus vitae tellus augue. Nunc nec mattis tortor. Praesent et neque sed lacus tempus pellentesque sed ut nunc. Quisque facilisis, urna sit amet finibus blandit, arcu erat molestie leo, ac blandit est orci finibus dui. Nullam rutrum, erat in porta consectetur, risus risus blandit tellus, ut facilisis velit sem a orci. Nunc mattis elit sem, eu consequat nisi consectetur nec. Nulla facilisi. Morbi gravida metus risus, nec iaculis nibh semper a. Nam non libero ornare, consectetur ante a, ultricies libero. Maecenas faucibus sollicitudin augue, eu commodo nunc ullamcorper eget.
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column blue">
      <div class="box bg-info">
        Proin et dignissim neque. Donec vel metus sit amet purus commodo pretium. Proin rhoncus leo eu diam convallis, sit amet efficitur lacus gravida. In sit amet diam vehicula, vestibulum orci eget, suscipit nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin id est pretium, pulvinar massa in, sollicitudin ipsum. Nullam nec faucibus odio. Phasellus dapibus dolor tortor, vitae scelerisque eros porttitor at. Donec convallis lectus ut cursus tempus. Sed faucibus at justo a bibendum. Praesent quis dignissim leo. Nunc iaculis lorem eget magna lobortis, id volutpat sem mattis. Maecenas justo nisi, placerat eu purus in, euismod tincidunt orci. Quisque sed urna venenatis, malesuada dolor vel, ornare diam.
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column green">
      <div class="box bg-success">
        Nullam tempor, dolor eu ultricies condimentum, diam nunc accumsan tortor, pharetra tempor nibh ligula at diam. Morbi tristique enim a tincidunt malesuada. In molestie sodales nulla et tristique. Mauris in dignissim lacus. Etiam orci massa, accumsan ac mattis vel, rutrum et lorem. Sed sed sapien risus. Nunc pretium urna eget ipsum pellentesque imperdiet. Duis dictum ullamcorper purus, eu tincidunt mi feugiat sed. In hac habitasse platea dictumst. In laoreet vitae sapien eu tristique. Fusce tempor erat turpis, a rutrum felis lacinia vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column blue">
      <div class="box bg-info">
        Phasellus vitae blandit magna. Nunc ac volutpat eros. Mauris mattis nulla ipsum, fermentum porttitor velit dignissim quis. Aenean fermentum nibh finibus, pulvinar magna eu, vulputate neque. Mauris ac mauris vel ex aliquam pulvinar quis eu neque. Quisque sed ligula quis leo sagittis fermentum. Vestibulum ultricies tristique tortor at volutpat.
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6 column red">
      <div class="box bg-danger">
        Etiam cursus luctus mi, ut scelerisque odio finibus vel. Praesent euismod nisl vel suscipit luctus. Morbi sit amet cursus sem. Sed ut mollis erat. Morbi eget semper tortor. Suspendisse nunc ex, euismod finibus vehicula vitae, iaculis eget est. Aliquam erat volutpat. Sed imperdiet quis ex elementum interdum. Quisque sed metus sit amet arcu egestas congue ut in lorem.
      </div>
    </div>
  </div>
</div>

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

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

            
          
!
            
              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 	= 2;
	columnWidth = containerWidth /cols;
	// console.log("xs");
  }
  else if (jQuery(this).width() >= 768 && jQuery(this).width() < 992) {
    containerWidth = jQuery( '#js-masonry' ).width()
	cols 	= 3;
	columnWidth = containerWidth /cols;
	// console.log("sm");
  }
  else if (jQuery(this).width() >= 992) {
    containerWidth = jQuery( '#js-masonry' ).width()
	cols 	= 4;
	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);

});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console