packery
Version:
Gapless, draggable grid layouts
121 lines (99 loc) • 2.77 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>fit</title>
<link rel="stylesheet" href="css/examples.css" />
<style>
#expanding-demo {
width: 40%;
}
#expanding-demo .item {
height: 40px;
width: 25%;
}
#expanding-demo .item.is-expanded {
height: 60px;
width: 50%;
background: #1D6;
}
#position-demo {
width: 30%;
}
#position-demo .item {
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<h1>fit</h1>
<div id="expanding-demo" class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="position-demo" class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-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="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/rect.js"></script>
<script src="../js/packer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/packery.js"></script>
<script>
( function() {
var container = document.querySelector('#expanding-demo');
var pckry = new Packery( container );
container.addEventListener( 'click', function( event ) {
// don't proceed if item was not clicked on
var target = event.target;
if ( !matchesSelector( target, '.item' ) ) {
return;
}
var isExpanded = target.classList.contains('is-expanded');
target.classList.toggle('is-expanded');
if ( isExpanded ) {
// if shrinking, just layout
pckry.shiftLayout();
} else {
// if expanding, fit it
pckry.fit( target );
}
});
})();
( function() {
var container = document.querySelector('#position-demo');
var pckry = new Packery( container );
container.addEventListener( 'click', function( event ) {
// don't proceed if item was not clicked on
var target = event.target;
if ( !matchesSelector( target, '.item' ) ) {
return;
}
// position item at 40, 40
pckry.fit( target, 40, 40 );
});
})();
</script>
</body>
</html>