jQuery Isotope masonry in fluid layouts

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

by neal_fletcher

HTML

<script src="//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.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

/*
RESETS ------------------------
*/ 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: ;background: transparent;}

/*
RESETS END --------------------
*/

.example figure {
	float: left;
	background: #17A781;
	width: 20%;
	height: 159px;
	margin: 0 0 0 0;
}
.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.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-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] : columnWidth,
					height = multiplier_h ? columnWidth*multiplier_h[1]*0.65 : columnWidth*0.65;
				$item.css({
					width: width,
					height: height
				});
			});
			return columnWidth;
		},
		isotope = function () {
			$container.isotope({
				resizable: false,
				itemSelector: '.item',
				masonry: {
					columnWidth: colWidth(),
				}
			});
		};
	isotope();
	$(window).smartresize(isotope);
}(jQuery));