jquery - Masonry images overlapping above each other

Question

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 1

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