砌体图像互相重叠 [英] Masonry images overlapping above each other

问题描述

我正在处理图片库的砌体布局。但是砌体大部分时间显示彼此重叠的图像。剩下的时间它的确定，有时一些图像div溢出到它的封闭的div下面的div。

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.

如何包含这些图像，而不是防止重叠。

How to contain these images in and not prevent overlap. imagesLoaded method has been deprecated I think.

确定这里是我的代码：

部分。将有许多

<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
    });
});

推荐答案

首先使用 imagesLoaded ：

First use 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不被弃用：

imagesLoaded is not deprecated:

a href =http://masonry.desandro.com/layout.html#imagesloaded =nofollow> http://masonry.desandro.com/layout.html#imagesloaded

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

这篇关于砌体图像互相重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！