Skip to content

Instantly share code, notes, and snippets.

@egibney

egibney/masonry.html

Created January 16, 2020 14:04
Show Gist options
  • Save egibney/851d900c72bae580d7f3186e6a206ed7 to your computer and use it in GitHub Desktop.
Save egibney/851d900c72bae580d7f3186e6a206ed7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
masonry.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A lightweight, dependency free, masonry layout library.">
<title>Macy.js - A lightweight, dependency free, JavaScript masonry layout library</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500italic,500,400italic,300,300italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="macy.css">
<link rel="stylesheet" href="assets/css/icons.css">
<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="assets/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="assets/img/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="assets/img/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="assets/img/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="assets/img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="assets/img/favicons/manifest.json">
<link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header class="hero">
<div class="container">
<img class="logo" src="assets/img/macy-logo.svg" style="width: 146px" alt="">
<h1 class="hero__title">Macy.js is a lightweight, dependency-free, 4kb masonry layout library, designed for a hassle-free configuration.</h1>
<a href="https://github.com/bigbitecreative/macy.js" class="btn has-icon icon-github">Download and docs on GitHub</a>
</div>
</header>
<main class="main" role="main">
<section class="section">
<div class="container">
<ul class="feature-list">
<li>User definable breakpoints</li><!--
--><li>Works with CSS transitions</li><!--
--><li>Simple event API</li><!--
--><li>No jQuery or other dependencies</li>
</ul>
</div>
</section>
<section class="section">
<div class="container">
<div id="macy-container">
<div class="demo"><img src="http://unsplash.it/557/387" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/602/660" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/660/646" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/741/375" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/813/455" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/470/896" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/664/653" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/708/313" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/738/578" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/458/482" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/439/856" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/549/315" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/877/693" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/542/805" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/683/445" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/616/340" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/533/317" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/700/894" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/663/541" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/368/575" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/696/538" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/571/460" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/892/379" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/473/729" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/657/632" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/311/796" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/588/561" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/812/564" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/353/454" alt="" class="demo-image"></div>
</div>
<p>second container</p>
<div id="macy-container2">
<div class="demo"><img src="http://unsplash.it/557/387" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/602/660" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/660/646" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/741/375" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/813/455" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/470/896" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/664/653" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/708/313" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/738/578" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/458/482" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/439/856" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/549/315" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/877/693" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/542/805" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/683/445" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/616/340" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/533/317" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/700/894" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/663/541" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/368/575" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/696/538" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/571/460" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/892/379" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/473/729" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/657/632" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/311/796" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/588/561" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/812/564" alt="" class="demo-image"></div>
<div class="demo"><img src="http://unsplash.it/353/454" alt="" class="demo-image"></div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
Made by <a href="//bigbitecreative.com">Big Bite Creative</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
<script>
Macy({
container: '#macy-container',
trueOrder: false,
waitForImages: false,
margin: 24,
columns: 6,
breakAt: {
1200: 5,
940: 3,
520: 2,
400: 1
}
});
Macy({
container: '#macy-container2',
trueOrder: false,
waitForImages: false,
margin: 24,
columns: 6,
breakAt: {
1200: 5,
940: 3,
520: 2,
400: 1
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment