Я работаю над макетным макетом для галереи изображений. Но кладка большую часть времени отображает изображения, наложенные друг на друга. В остальное время его нормально, а иногда некоторые div div переполняются на div ниже их закрывающего div.
Как содержать эти изображения внутри и не перекрывать перекрытие. imagesLoaded метод был устаревшим, я думаю.
ok вот мой код:
Пример изображения в частичном. Будет много
<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
});
});