Les images de maçonnerie se chevauchent les unes sur les autres

Je suis en train de travailler sur une maçonnerie mise en page pour une galerie d'images. Mais la maçonnerie, la plupart du temps affiche les images se chevauchent l'une sur l'autre. Le reste du temps, son ok et parfois une certaine image de la vrd déborder sur le div en dessous de leur joignant div.

Comment contenir ces images et les empêche pas de chevauchement. imagesLoaded méthode a été abandonnée je pense.

ok, voici mon code:

De l'image par exemple dans le partiel. Il y aura beaucoup de

<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>

Enfermant 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
    });
});

source d'informationauteur Steve Robinson