jQuery Isotope masonry in fluid layouts

http://www.i-do-this.com/blog/103/Using-jQuery-Isotope-for-masonry-in-fluid-layouts

by johnnytrinh

HTML

<script src="//cdn.jsdelivr.net/isotope/2.0.0/isotope.pkgd.min.js"></script>
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.debouncedresize.js"></script>
<div class="example">
	<figure class="item item-w2 item-h3">
		<figcaption>Item 1</figcaption>
	</figure>
	<figure class="item item-h2">
		<figcaption>Item 2</figcaption>
	</figure>
	<figure class="item item-h2">
		<figcaption>Item 3</figcaption>
	</figure>
	<figure class="item">
		<figcaption>Item 4</figcaption>
	</figure>
	<figure class="item item-w2 item-h3">
		<figcaption>Item 5</figcaption>
	</figure>
	<figure class="item">
		<figcaption>Item 6</figcaption>
	</figure>
	<figure class="item item-h2">
		<figcaption>Item 7</figcaption>
	</figure>
	<figure class="item item-w2 item-h3">
		<figcaption>Item 8</figcaption>
	</figure>
	<figure class="item">
		<figcaption>Item 9</figcaption>
	</figure>
	<figure class="item item-h2">
		<figcaption>Item 10</figcaption>
	</figure>
	<figure class="item item-w2 item-h3">
		<figcaption>Item 11</figcaption>
	</figure>
	<figure class="item item-h2">
		<figcaption>Item 12</figcaption>
	</figure>
	<figure class="item item-h2">
		<figcaption>Item 13</figcaption>
	</figure>
	<figure class="item">
		<figcaption>Item 14</figcaption>
	</figure>
</div>

CSS

.example figure {
	float: left;
	background: #17A781;
	width: 20%;
	height: 159px;
	margin: 0 2px 4px;
}
.example .item-w2 {
	width: 40%;
	background: #ED9393;
}
.example .item-h2 {
	height: 322px;
	background: #7CB744;
}
.example .item-h3 {
	height: 485px;
	background: #38B5E5;
}
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}

JavaScript

(function ($) {
	var $container = $('.example'),
		colWidth = function () {
			var w = $container.width(), 
				columnNum = 1,
				columnWidth = 0;
			if (w > 1200) {
				columnNum  = 5;
			} else if (w > 900) {
				columnNum  = 4;
			} else if (w > 600) {
				columnNum  = 3;
			} else if (w > 300) {
				columnNum  = 2;
			}
			columnWidth = Math.floor(w/columnNum);
			$container.find('.item').each(function() {
				var $item = $(this),
					multiplier_w = $item.attr('class').match(/item-w(\d)/),
					multiplier_h = $item.attr('class').match(/item-h(\d)/),
					width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
					height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
				$item.css({
					width: width,
					height: height
				});
			});
			return columnWidth;
		},
		isotope = function () {
			$container.isotope({
				itemSelector: '.item',
				masonry: {
					columnWidth: colWidth()
				}
			});
		};
    isotope();
    $(window).on('debouncedresize', isotope);
}(jQuery));