Изображения каменной кладки, перекрывающиеся друг над другом

Question

Я работаю над макетным макетом для галереи изображений. Но кладка большую часть времени отображает изображения, наложенные друг на друга. В остальное время его нормально, а иногда некоторые div div переполняются на div ниже их закрывающего div.

Как содержать эти изображения внутри и не перекрывать перекрытие. Я считаю, что метод imagesLoaded устарел.

ОК вот мой код:

Пример изображения в парциальное. Там будет много

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

вшита код:

<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

imagesLoaded Первое использование:

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

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

затем, если вы можете указать изображения ширина/высота атрибуты тега изображения

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

imagesLoaded не рекомендуется:

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