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!

All versions