Masonry - Multiple Column Span

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 w2">
        <img src="http://placehold.it/100x300" />
    </div>
    <div class="item w2">
        <img src="http://placehold.it/200x500" />
    </div>
    <div class="item w3">
        <img src="http://placehold.it/400x400" />
    </div>
    <div class="item w2">
        <img src="http://placehold.it/300x100" />
    </div>
    <div class="item">
        <img src="http://placehold.it/600x150" />
    </div>
    <div class="item w2">
        <img src="http://placehold.it/200x500" />
    </div>
    <div class="item">
        <img src="http://placehold.it/600x500" />
    </div>
</div>

CSS

#container {
    position:relative;
}
.item {
    width:300px;
    margin:5px;
}
.item.w2, .item.w3 {
    width:150px;
}
img {
    display:block;
    width:100%;
}
@media all and (min-width:600px) {
    .item {
        width:calc(100% - 10px);
        float:left;
        background:cyan;
        box-sizing:border-box;
        margin:5px;
    }
    .item.w2,
    .item.w3 {
        width:calc(50% - 10px);
    }
}

JavaScript

$(function () {
    $('#container').masonry({
        "itemSelector": '.item',
            "columnWidth": 1

    });



});