Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Foundation 5 Masonry
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/_masonry.scss" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<nav>
<ul class="nav-links button-group even-5">
<li class="button">company</li>
<li class="button">programs</li>
<li class="logo button">Fang &amp; Kerning</li>
<li class="button">partners</li>
<li class="button">contact us</li>
</ul>
</nav>
<div class="row masonry-width">
<div class="small-12 small-centered columns">
<!-- MASONRY CONTAINER -->
<div id="masonryContainer">
<div class="masonry-brick">
<img src="http://placehold.it/500x300&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x600&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x700&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x400&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x300&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x600&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x700&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x400&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x300&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x600&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x700&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x400&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
.row.masonry-width {
max-width: rem-calc(1140);
}
.masonry-brick { width: 340px; margin: 10px; float: left; }
#masonryContainer { width: 0 auto; margin: 0 auto; }
$(document).foundation();
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.masonry-brick',
columnWidth: 180
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.