Masonry images overlapping above each other

Steve Robinson picture Steve Robinson · Jul 17, 2013 · Viewed 24k times · Source

I am working on a masonry layout for an image gallery. But masonry most of the time displays images overlapped on one another. Rest of the time its ok and sometimes some image divs overflow onto the div below their enclosing div.

How to contain these images in and not prevent overlap. imagesLoaded method has been deprecated I think.

ok here is my code:

Example of the image in the partial. There will be many

<div class="container span3" >
        <div class="image">
            <div class="content">
                <a href="/issues/<%= image.id %>"></a>
                <%= image_tag(image.photo.url(:medium)) %>
            </div>
        </div>
        <div class="title">
            <h2><a href="/images/<%= image.id %>"><%= truncate(image.title, :length => 20, :omission => '...') %></a></h2>
        </div>
    </div>

Enclosing code:

<div class="images-grid">
  <div class="row" id="images_container">
    <%= render :partial => 'shared/images' %>
  </div>
</div>

CSS:

.images-grid .container .image {
    overflow:hidden;
    position:relative;
}

.images-grid .container .image img {
    height:auto;
    width:100%;
}

.images-grid .container {
    display:inline-block;
    background-color:#fff;
    margin-bottom:30px;
    padding-bottom:10px;
    position:relative;
}

JQuery:

$(document).ready(function() {
    var $container = $('#images_container');
    // initialize
    $container.masonry({
      columnWidth: 150,
      itemSelector: '.property',
      isAnimated: true,
      isFitWidth: true
    });
});

Answer

grigno picture grigno · Jul 17, 2013

First use imagesLoaded :

// with jQuery
var $container = $('#container');

// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
     $container.masonry();
});

then, if you can, specify the image width/height attributes on image tag

<img src="...." width="200" height="200" />

imagesLoaded is not deprecated:

http://masonry.desandro.com/layout.html#imagesloaded