0

I know these masonry questions tend to be very specific and cumbersome. This time I am stuck and can't figure out why the bottom row isn't floated together into one row.

What I got without masonry (just float left):

enter image description here

What I get with masonry:

enter image description here

What I expect:

enter image description here

HTML

<ul class="js-tiles tiles">
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/400/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/400/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-ite"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
</ul>

CSS

.tiles {
    display: block;
    width: 1150px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.tiles .tiles-item {
    padding: 0;
    margin: 0 0 20px 0;
    display: inline-block;
    overflow: hidden;
    background-color: #ff69b4;
    font-size: 0;
}
.tiles .tiles-item .tiles-img {
    max-width: 100%;
}

JS

$(function() {
    var $tiles = $('.js-tiles');
    var options = {
        itemSelector: '.js-tiles-item',
        columnWidth: 300,
        gutter: 20
    };

    $tiles.imagesLoaded( function() {
        $tiles.masonry(options);
    });
});

CodePen for playing

Anyone got an idea?

Dominik
  • 6,078
  • 8
  • 37
  • 61

1 Answers1

1

change the columnWidth to 150

var options = {
        itemSelector: '.js-tiles-item',
        columnWidth: 150,
        gutter: 20
    };
madhu kumar
  • 786
  • 1
  • 12
  • 46
  • Ah! I see. If the columnWidth is 300 the smaller images have to take up this much space at least... Thanks! Much appreciate it... – Dominik May 19 '14 at 06:07