Immagini in muratura sovrapposte una sopra l'altra

Question

Sto lavorando a un layout in muratura per una galleria di immagini. Ma la maggior parte delle volte la muratura mostra immagini sovrapposte l'una sull'altra. Il resto del tempo va bene e qualche volta le immagini divengono eccessive sul div al di sotto del loro div di chiusura.

Come contenere queste immagini e non impedirne la sovrapposizione. Il metodo di salvataggio delle immagini è stato deprecato, penso.

ok qui è il mio codice:

Esempio di immagine nel parziale. Ci saranno molti

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

codice allegando:

<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

Primo utilizzo imagesLoaded:

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

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

poi, se è possibile, specificare l'immagine larghezza/altezza attributi di tag di immagine

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

imagesLoaded non è deprecato:

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