砌體圖像彼此重疊

Question

我正在爲圖像庫砌築佈局。但砌體大部分時間顯示圖像重疊在一起。其餘的時間它的確定，有時一些圖像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