waterfall.js
Version:
Pinterest Grid in Just 1KB
100 lines (84 loc) • 1.83 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
hr {
margin: 2em 0;
}
.wrap {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.withPadding article {
padding: 20px 0 0 20px;
}
.withBorder article {
border: 0 solid transparent;
border-width: 20px 0 0 20px;
}
article {
width: 33.33%;
box-sizing: border-box;
}
article div {
height: 20px;
background: #CCC;
}
article:nth-child(odd) div {
background: #AAA;
height: 50px;
}
</style>
</head>
<body>
<h4>No waterfall with border</h4>
<div class="wrap withBorder">
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
</div>
<hr>
<h4>Waterfall with paddings</h4>
<div class="wrap waterfall withPadding">
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
</div>
<hr>
<h4>Waterfall with borders</h4>
<div class="wrap waterfall withBorder">
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
<article><div></div></article>
</div>
<script src="src/waterfall.js"></script>
<script>
waterfall('.waterfall.withPadding');
waterfall('.waterfall.withBorder');
// Doesn't work
// waterfall('.waterfall');
</script>
</body>
</html>