Hình ảnh xây dựng chồng lên nhau hơn

Question

Tôi đang làm việc trên một bố cục nề cho một thư viện hình ảnh. Nhưng phần lớn thời gian hiển thị hình ảnh chồng lên nhau. Phần còn lại của thời gian của nó ok và đôi khi một số div hình ảnh tràn vào div bên dưới div kèm theo của họ.

Cách chứa những hình ảnh này và không ngăn chồng chéo. phương pháp imagesLoaded đã không còn được dùng nữa.

ok đây là mã của tôi:

Ví dụ về hình ảnh trong một phần. Sẽ có nhiều

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

mã kèm theo:

<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

sử dụng đầu tiên imagesLoaded:

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

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

sau đó, nếu bạn có thể, chỉ rõ hình ảnh chiều rộng/chiều cao thuộc tính trên thẻ hình ảnh

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

imagesLoaded không chấp nhận:

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