outlayer
Version:
the brains and guts of a layout library
65 lines (52 loc) • 1.29 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>stagger</title>
<style>
* { box-sizing: border-box; }
.grid {
background: #DDD;
}
.grid-item {
float: left;
width: 100px;
height: 100px;
border: 1px solid;
background: #19F;
}
</style>
</head>
<body>
<h1>stagger</h1>
<p>
<button class="reveal-button">Reveal</button>
</p>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../item.js"></script>
<script src="../outlayer.js"></script>
<script src="fit-rows.js"></script>
<script>
var layout = new FitRows( '.grid', {
stagger: 50
});
document.querySelector('.reveal-button').onclick = function() {
layout.reveal( layout.items );
};
</script>
</body>
</html>