Get started with isotope-packery CDN
MIT licensed
Isotope: library for masonry layouts, filtering large collections.
Tags:- DOM
- browser
- packery
- layout
- isotope
- isotope-layout-mode
Stable version
Copied!
How to start using isotope-packery CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/isotope/2.3.0/isotope.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.cdnhub.io/isotope-packery/2.0.1/packery-mode.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/isotope/2.3.0/isotope.pkgd.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
<div class="item item-4">Item 4</div>
<div class="item item-5">Item 5</div>
</div>
<script>
$(function() {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
layoutMode: 'packery',
packery: {
columnWidth: '.grid-sizer'
}
});
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!