Masonry - Packery demo

by Chris LaFrombois

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>
<div id="container">
    <div class="item h2">
        <h1>HERE IS SOME SWEET TEXT</h1>
    </div>
    <div class="item w2"></div>
    <div class="item w3"></div>
    <div class="item w2"></div>
    <div class="item h3"></div>
    <div class="item w2 h2"></div>
    <div class="item"></div>
</div>

CSS

#container {
    position:relative;
}

div.item {
    width:calc(33.333% - 10px);
    height:100px;
    float:left;
    background:cyan;
    box-sizing:border-box;
    margin:5px;
}

h1 {
    display:none;
}

.item.h2 {
    height:150px;
    background:green;
}

.item.h3 {
    height:180px;
    background:red;
}

.item.w2 {
    background:blue;
}

.item.w3 {
    background:orange;
}

.item.gigante {
    width:100%;
    height:600px;
}

JavaScript

$(function() {
    $('#container').masonry({
      "itemSelector" : '.item'
    });
   
    $('.item').on('click', function() {
        
        $(this).toggleClass('gigante');
        
        var isGigante = $(this).hasClass('gigante');
        
        if(isGigante) {
            $('#container').masonry();
        } else {
            $('#container').masonry();
        }
    
    });
 
});