JSFiddle - React, Tailwind, and code Playground

by norsewulf

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
	<!-- main content -->
	<div class="main-container">
		<!-- masonry -->
		<div class="masonry">
	
			<div class="lbox item"></div>
			<div class="lbox item"></div>
			<div class="tbox item"></div>
			<div class="sbox item"></div>	
			<div class="sbox item"></div>			
			<div class="lbox item"></div>
			<div class="sbox item"></div>				
			<div class="sbox item"></div>			

					
		</div>
		<!-- masonry -->
		
	</div>
	<!-- ./ main content-->

CSS

.main-container {
  *zoom: 1;
  max-width: 117.5em;
  padding-left: 2.5em;
  padding-right: 2.5em;
  margin-left: auto;
  margin-right: auto;
}
.main-container:after {
  content: "";
  display: table;
  clear: both;
}

.item {
  float: left;
}

.lbox {
  background-color: #f8f8f8;
  margin: 1.5% 0% 0 0;
  width: 98.3%;
}
@media screen and (min-width: 600px) {
  .lbox {
    margin: 1.5% 1.5% 0 0;
    width: 48.3%;
  }
}

.tbox {
  background-color: #f8f8f8;
  margin: 1.5% 1.5% 0 0;
  width: 48.3%;
}
@media screen and (min-width: 600px) {
  .tbox {
    margin: 1.5% 1.5% 0 0;
    width: 23.3%;
  }
}

.sbox {
  background-color: #f8f8f8;
  margin: 1.5% 1.5% 0 0;
  width: 48.3%;
}
@media screen and (min-width: 600px) {
  .sbox {
    margin: 1.5% 1.5% 0 0;
    width: 23.3%;
  }
}

.masonry {
  margin-right: -1.5%;
}

JavaScript

$( function() {

	/* MASONRY
	----------------------------------------------------------------*/
	/* Layout Block Container Setup */
	
	var gutterWidth = $(".main-container").width() * .015;
	
	var longBox = $(".sbox").width() + 'px';
	$(".lbox").css("height",longBox);
	
	var tallBox = $(".sbox").width() * 2 + gutterWidth + 'px';
	$(".tbox").css("height",tallBox);

	var smallBox = $(".sbox").width() + 'px';
	$(".sbox").css("height",smallBox);		
	
	$('.masonry').masonry({
		itemSelector: '.item',
		// set columnWidth a fraction of the container width
		columnWidth: function( containerWidth ) {
			return containerWidth / 4;
		}
	});
    
	/* WINDOW RESIZE FUNCTIONS
	----------------------------------------------------------------*/
	$(window).resize(function(){

		/* Masonry Box Dimension Setup
		----------------------------------------------------------------*/
		var gutterWidth = $(".main-container").width() * .015;
		
		var longBox = $(".sbox").width() + 'px';
		$(".lbox").css("height",longBox);
		
		var tallBox = $(".sbox").width() * 2 + gutterWidth + 'px';
		$(".tbox").css("height",tallBox);
	
		var smallBox = $(".sbox").width() + 'px';
		$(".sbox").css("height",smallBox);		
		
		
	}).trigger('resize');

});