Skip to content

Instantly share code, notes, and snippets.

@carlosrivera

carlosrivera/bootstrap-masonry-3.htm

Forked from justincarroll/bootstrap-masonry-template.htm
Created January 7, 2014 02:36
Show Gist options
  • Save carlosrivera/8293843 to your computer and use it in GitHub Desktop.
Save carlosrivera/8293843 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-masonry-3.htm
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry 3 + Bootstrap</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Header -->
<header id="header" class="container">
<h1>Masonry 3 + Bootstrap</h1>
<p class="lead">
280px thumbs with a 50px gutter because it divides evenly into 940px, Bootstrap's default width.
But feel free to tweak it out. <code>.container</code> requires media queries for specific sizes, but <code>.container-fluid</code> submits to the default thumbnail width.
</p>
<hr>
</header>
<!-- Posts -->
<div class="container">
<div id="posts">
<div class="post">
<img src="http:/placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post cs2">
<img src="http:/placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http:/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>
Raw
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 is .container-fluid. Triggers resize so nothing looks weird.
jQuery( window ).bind( 'resize', function(){
if ( jQuery( '#posts' ).parent().hasClass( 'container-fluid' ) ) {
// Resets all widths to 'auto' to sterilize calculations
post_width = jQuery( '.post' ).width() + gutter;
jQuery( '.container-fluid #posts, body > .container-fluid' ).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 .container-fluid elements have equal width and stay centered
jQuery( '.container-fluid #posts, body > .container-fluid' ).css( 'width', posts_width );
jQuery( 'body > .container-fluid' ).css({ 'margin': '0 auto' });
}
}).trigger( 'resize' );
});
Raw
style.css
/* Default tags and Bootstrap classes */
body {
font-family: 'PT Sans Caption', sans-serif;
color: #000099;
margin: 0;
padding: 50px 0;
}
.lead { padding: 40px 0; }
/* Posts */
#posts { margin: 30px auto 0; }
.post {
margin: 0 0 50px;
text-align: center;
width: 280px;
}
.post.cs2 { width: 610px; }
.post img { width: 100%; }
/* Large desktop */
@media (min-width: 1200px) {
.container > #posts .post { width: 255px; }
.container > #posts .post.cs2 { width: 560px; }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.container-fluid > #posts .post { width: 280px; }
.container-fluid > #posts .post.cs2 { width: 610px; }
.container > #posts .post { width: 337px; }
.container > #posts .post.cs2 { width: 100%; }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body { padding: 50px 20px; }
.post, .post.cs2 { width: 100%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment