Skip to content

Instantly share code, notes, and snippets.

@istro

istro/index.html

Created May 27, 2014 21:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save istro/3672148ba0ef80e89639 to your computer and use it in GitHub Desktop.
Save istro/3672148ba0ef80e89639 to your computer and use it in GitHub Desktop.
Download ZIP
masonry example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<style>
.item { width: 150px;}
.item.w2 { width: 300px; }
img {width: 100%;}
</style>
</head>
<body>
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 150}'>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/1.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/9.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/10.jpg" />
</div>
<div class="item w2">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/2.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/3.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/4.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/5.jpg" />
</div>
<div class="item w2">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/6.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/7.jpg" />
</div>
<div class="item">
<img src="http://tympanus.net/Development/GammaGallery/images/medium/8.jpg" />
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment