Obrazy murów zachodzące na siebie nawzajem

Question

Pracuję nad układem murowania dla galerii obrazów. Ale murowanie przez większość czasu wyświetla nałożone na siebie obrazy. Reszta czasu jest ok, a czasami obraz divs przelewa się na div poniżej ich div div.

Jak zawrzeć te obrazy i nie zapobiegać nałożeniu się. Metoda imagesLoaded została uznana za przestarzałą.

ok tutaj jest mój kod:

Przykład obrazu w częściowym. Będzie wielu

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

<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

Pierwsze użycie imagesLoaded:

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

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

wtedy, jeśli można określić obrazu szerokość/wysokość atrybuty tagu obrazu

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

imagesLoaded nie jest przestarzałe:

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