isotope - custom packery layout

by katalin_2003

HTML

<script src="http://isotope.metafizzy.co/isotope.pkgd.js"></script>
<script src="http://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.js"></script>
<h1>Isotope - packery layout mode</h1>

<div class="isotope">
  <div class="item height3">2</div>
  <div>
    <div class="item">1.1</div>
    <div class="item">1.2</div>
    <div class="item">1.3</div>
  </div>
  <div>
    <div class="item">2.1</div>
    <div class="item">2.2</div>
    <div class="item">2.3</div>
  </div>
  <div>  
    <div class="item">3.1</div>
    <div class="item">3.2</div>
    <div class="item">3.3</div>
  </div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- isotope ---- */

.isotope {
  background: #DDD;
  max-width: 100%;
}

/* clear fix */
.isotope:after {
/*  content: '';*/
  display: block;
  clear: both;
}

/* ---- .item ---- */

.item {
  float: left;
  width: 25%;
  height: 100px;
  background: #0D8;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.item.width2 { width: 200px; }
.item.height2 { height: 200px; }
.item.height3 { height: 300px; }

JavaScript

// external js:
// http://isotope.metafizzy.co/isotope.pkgd.js
// http://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.js

$( function() {
  
  $('.isotope').isotope({
    layoutMode: 'packery',
    itemSelector: '.item'
  });
  
});