isotope - packery layout mode

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">1.1</div>
    <div class="item">1.2</div>
    <div class="item">1.3</div>
    <div class="item height2">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item width2 height2">5</div>
    <div class="item width2">6</div>
    <div class="item width2">7</div>
    <div class="item height2">8</div>
    <div class="item">9</div>
    <div class="item width2">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</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: 1200px;
}
/* clear fix */
 .isotope:after {
    content:'';
    display: block;
    clear: both;
}
/* ---- .item ---- */
 .item {
    float: left;
    width: 100px;
    height: 100px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
}
.item.width2 {
    width: 200px;
}
.item.height2 {
    height: 200px;
}

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'
    });

});