e77b3c9d3b322e511ecf by bollwyvl

script.js

// Load is used to ensure all images have been loaded, impossible with document

jQuery(window).load(function () {



	// Takes the gutter width from the bottom margin of .post

	var gutter = parseInt(jQuery('.post').css('marginBottom'));
	var container = jQuery('#posts');



	// Creates an instance of Masonry on #posts

	container.masonry({
		gutter: gutter,
		itemSelector: '.post',
		columnWidth: '.post'
	});
	
	
	
	// This code fires every time a user resizes the screen and only affects .post elements
	// whose parent class isn't .container. Triggers resize first so nothing looks weird.
	
	jQuery(window).bind('resize', function () {
		if (!jQuery('#posts').parent().hasClass('container')) {
			
			
			
			// Resets all widths to 'auto' to sterilize calculations
			
			post_width = jQuery('.post').width() + gutter;
			jQuery('#posts, body > #grid').css('width', 'auto');
			
			
			
			// Calculates how many .post elements will actually fit per row. Could this code be cleaner?
			
			posts_per_row = jQuery('#posts').innerWidth() / post_width;
			floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
			ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
			posts_width = (ceil_posts_width > jQuery('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
			if (posts_width == jQuery('.post').width()) {
				posts_width = '100%';
			}
			
			
			
			// Ensures that all top-level elements have equal width and stay centered
			
			jQuery('#posts, #grid').css('width', posts_width);
			jQuery('#grid').css({'margin': '0 auto'});
        		
		
		
		}
	}).trigger('resize');
	


});

index.html

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Masonry Template</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans+Caption:400,700">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script src="//code.jquery.com/jquery.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	
	
	
	<!-- Header -->
	
	<header id="header" class="container">
		<h1>Bootstrap 3 + Masonry 3</h1>
		<p class="lead">
			This is deployed with the <code>#grid</code> div fluid (that is, it has no Bootstrap <code>.container</code> class). To make it fixed simply add the <code>.container</code> class to it. Use the media queries in <strong>style.css</strong> to change the grid's post widths and margins.
		</p>
		<hr>
	</header>
	
	
	
	<!-- Posts -->
	
	<!-- <div id="grid" class="container"> -->
	<div id="grid">
		<div id="posts">
			<div class="post">
				<img src="//placehold.it/600x400"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/400x600"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/600x400"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/400x600"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post cs2">
				<img src="//placehold.it/600x400"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/400x600"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/600x400"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/400x600"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/600x400"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/400x600"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/600x400"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
			<div class="post">
				<img src="//placehold.it/400x600"><br>
				<br>
				<strong>Title Goes Here</strong><br>
				<small>Category</small>
			</div>
		</div>
	</div>



	<!-- Footer -->
	
	<footer id="footer" class="container">
		<hr>
		<p>Thanks for watching!</p>
	</footer>
	
	
	
</body>
</html>

style.css

/* Default tags and Bootstrap classes */

body {
	font-family: 'PT Sans Caption', sans-serif;
	color: #000099;
	padding: 40px 0;
}

.lead { padding: 40px 0; }



/* Grid */

#posts { margin: 30px auto 0; }
.post {
	margin: 0 0 50px;
	text-align: center;
	width: 100%;
}
.post img { padding: 0 15px; width: 100%; }

#grid.container .post img { padding: 0; }


/* Medium devices */

@media (min-width: 768px) {
	#grid > #posts .post { width: 335px; }
	#grid > #posts .post.cs2 { width: 100%; }
	.post img { padding: 0; }
}



/* Medium devices */

@media (min-width: 992px) {
	#grid > #posts .post { width: 445px; }
	#grid > #posts .post.cs2 { width: 100%; }
}



/* Large devices */

@media (min-width: 1200px) {
	#grid > #posts .post { width: 346px; }
	#grid > #posts .post.cs2 { width: 742px; }
}



/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. If you don't care, no problem, just delete this.
Can this be done with Masonry options? */

@media (min-width: 1300px) {
	#grid {
		left: -50px;
		padding-left: 50px;
		padding-right: 50px;
		position: relative;
    	}
	#grid.container {
		left: auto;
		padding-left: 15px;
		padding-right: 15px;
	}
}