Les images de maçonnerie se chevauchent les unes sur les autres
Je suis en train de travailler sur une maçonnerie mise en page pour une galerie d'images. Mais la maçonnerie, la plupart du temps affiche les images se chevauchent l'une sur l'autre. Le reste du temps, son ok et parfois une certaine image de la vrd déborder sur le div en dessous de leur joignant div.
Comment contenir ces images et les empêche pas de chevauchement. imagesLoaded méthode a été abandonnée je pense.
ok, voici mon code:
De l'image par exemple dans le partiel. Il y aura beaucoup de
<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>
Enfermant code:
<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
});
});
source d'informationauteur Steve Robinson
Vous devez vous connecter pour publier un commentaire.
De la première utilisation
imagesLoaded
:ensuite, si vous le pouvez, indiquez la largeur de l'image/de la hauteur des attributs de balise d'image
imagesLoaded n'est pas déconseillée:
http://masonry.desandro.com/layout.html#imagesloaded