jQuery 砌体图像相互重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17697223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Masonry images overlapping above each other
提问by Steve Robinson
I am working on a masonry layout for an image gallery. But masonry most of the time displays images overlapped on one another. Rest of the time its ok and sometimes some image divs overflow onto the div below their enclosing div.
我正在为图片库设计砌体布局。但是大部分时间砌体显示的图像彼此重叠。其余时间没问题，有时某些图像 div 会溢出到其封闭 div 下方的 div 上。
How to contain these images in and not prevent overlap. imagesLoaded method has been deprecated I think.
如何包含这些图像而不是防止重叠。我认为 imagesLoaded 方法已被弃用。
ok here is my code:
好的，这是我的代码：
Example of the image in the partial. There will be many
部分中的图像示例。会有很多
<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>
Enclosing code:
封装代码：
<div class="images-grid">
<div class="row" id="images_container">
<%= render :partial => 'shared/images' %>
</div>
</div>
CSS:
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
});
});
回答by grigno
First use imagesLoaded:
第一次使用imagesLoaded：
// with jQuery
var $container = $('#container');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry();
});
then, if you can, specify the image width/height attributes on image tag
然后，如果可以，请在图像标签上指定图像宽度/高度属性
<img src="...." width="200" height="200" />
imagesLoaded is not deprecated:
imagesLoaded 未弃用：
