responsive isotope masonry layout

by nickpish

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<body>
	<h1>Responsive Isotope Masonry Layout Demo</h1>
	<p><a href="https://github.com/shariarbd/Responsive-Isotope-Masonry-Layout.git" target="_blank">Download This </a> <a href="http://shariarbd.com/2015/02/responsive-isotope-version-2-masonry-layout/">Back to Article</a> <a href="http://isotope.metafizzy.co/" target="_blank">Visit Isotope Page</a></p>

	<div class="isotope-filters">
		<button data-filter="" class="active">All</button>
		<button data-filter=".cat-1">Category 1</button>
		<button data-filter=".cat-2">Category 2</button>
		<button data-filter=".cat-3">Category 3</button>
		<button data-filter=".cat-4">Category 4</button>
	</div> <!-- /.portfolioFilter -->

	<div class="isotope">
		<div class="item cat-2 width2 cat-4"></div>
		<div class="item height2 cat-4"></div>
		<div class="item cat-2"></div>
		<div class="item cat-1"></div>
		<div class="item cat-2 cat-4"></div>
		<div class="item cat-2"></div>
		<div class="item cat-2 cat-3"></div>
		<div class="item width2 height2"></div>
		<div class="item width2"></div>
		<div class="item width2 cat-4"></div> 
		<div class="item  cat-1 height2"></div>
		<div class="item cat-2 cat-3"></div>
		<div class="item cat-3"></div>
		<div class="item cat-3 width2 height2 cat-1"> </div>
		<div class="item width2 cat-4 cat-1"></div>
		<div class="item height2 cat-3"></div> 
		<div class="item cat-1 cat-3"></div>  
	</div>
	<div class="some-text">
		<p>
			The above is the demo of Isotope Responsive Masonry Layout having four different size of items. Resize the browser window and check how it works. It's fully responsive and you are free to set column number as you need according to isotope container.
		</p>

		<p>
			To customize, please see the custom.js file that contain the customization option of height and width of each items.
		</p>
	</div>

CSS

* {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		} 
		body {
			font-family: sans-serif;
			max-width: 1200px;
			margin: auto;
		}
		h1 {
			text-align: center;
			padding: 50px 0 10px 0;
		}
		p {
			text-align: center;
			padding-bottom: 20px;
		}
		p a {
			text-decoration: none;
			padding: 0 30px;
		}
		.some-text {
			padding: 30px;
			max-width: 960px;
			margin: auto;
			
		}
		.some-text p {
			line-height: 25px;
			text-align: left;
		}


		/* ---- isotope ---- */
		
		.isotope-filters {
			display: table;
			margin: 20px  auto;
		}
		.isotope-filters  button {
			border:none;
			margin: 2px; 
			line-height: 30px;
			padding: 0 20px;
			cursor: pointer;
		}
		.isotope-filters  button:focus {
			outline: none;
			outline-style: none;
			outline-offset:0; 
		}
		.isotope-filters  button.active {
			background: #0D8;
		}

		.isotope {
			background: #DDD;
			max-width: 1200px;
		}

		/* clear fix */
		.isotope:after {
			content: '';
			display: block;
			clear: both;
		}

		/* ---- .item ---- */

		.item {
			float: left;
			width: 200px;
			height: 200px;
			background: #0D8;
			border: 2px solid #333;
			border-color: hsla(0, 0%, 0%, 0.7);
		}

		.item.width2 { width: 400px; }
		.item.height2 { height: 400px; }

JavaScript

jQuery(window).on("load resize",function(e){
	var $container = $('.isotope'),
	colWidth = function () {
		var w = $container.width(), 
		columnNum = 1,
		columnWidth = 0;
	//Select what will be your porjects columns according to container widht
	if (w > 1040)     { columnNum  = 6; }  
	else if (w > 850) { columnNum  = 5; }  
	else if (w > 768) { columnNum  = 4; }  
	else if (w > 480) { columnNum  = 3; }
	else if (w > 300) { columnNum  = 2; }
	columnWidth = Math.floor(w/columnNum);

	//Default item width and height
	$container.find('.item').each(function() {
		var $item = $(this), 
		width = columnWidth,
		height = columnWidth;
		$item.css({ width: width, height: height });
	}); 

	//2x width item width and height
	$container.find('.width2').each(function() {
		var $item = $(this), 
		width = columnWidth*2,
		height = columnWidth;
		$item.css({ width: width, height: height });
	}); 

	//2x height item width and height
	$container.find('.height2').each(function() {
		var $item = $(this), 
		width = columnWidth,
		height = columnWidth*2;
		$item.css({ width: width, height: height });
	}); 

	//2x item width and height
	$container.find('.width2.height2').each(function() {
		var $item = $(this), 
		width = columnWidth*2,
		height = columnWidth*2;
		$item.css({ width: width, height: height });
	}); 
	return columnWidth;
	},
	isotope = function () {
		$container.isotope({
			resizable: true,
			itemSelector: '.item',
			masonry: {
				columnWidth: colWidth(),
				gutterWidth: 10
			}
		});
	};
	isotope(); 


	// bind filter button click
	$('.isotope-filters').on( 'click', 'button', function() {
		var filterValue = $( this ).attr('data-filter');
		$container.isotope({ filter: filterValue });
	});

	// change active class on buttons
	$('.isotope-filters').each( function( i, buttonGroup ) {
		var $buttonGroup = $( buttonGroup );
		$buttonGroup.on( 'click', 'button', function() {
			$buttonGroup.find('.active').removeClass('active');
			$( this...