Skip to content

Instantly share code, notes, and snippets.

@jonathanlurie

jonathanlurie/MasonryTest.html

Created February 24, 2017 14:20
Show Gist options
  • Save jonathanlurie/1aa2386bbdb22a0e850158fa7339e9b5 to your computer and use it in GitHub Desktop.
Save jonathanlurie/1aa2386bbdb22a0e850158fa7339e9b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MasonryTest.html
<html>
<head>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<style>
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 25%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<h1>Masonry - imagesLoaded progress, vanilla JS</h1>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
</div>
</div>
<script>
// external js: masonry.pkgd.js, imagesloaded.pkgd.js
// init Isotope
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
imagesLoaded( grid ).on( 'progress', function() {
// layout Masonry after each image loads
msnry.layout();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment