Jquery 砖石图像相互重叠

我正在为一个图像画廊做砖石布局。但大多数情况下，砌体显示的图像相互重叠。剩下的时间是正常的，有时一些图像div溢出到它们的封闭div下面的div上

如何在中包含这些图像而不防止重叠。我想imagesLoaded方法已经被弃用了

好的，这是我的代码：

局部视图中的图像示例。会有很多

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

JQuery：

$(document).ready(function() {
    var $container = $('#images_container');
    // initialize
    $container.masonry({
      columnWidth: 150,
      itemSelector: '.property',
      isAnimated: true,
      isFitWidth: true
    });
});

---

首先使用已添加的图像：

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

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

然后，如果可以，在图像标记上指定图像宽度/高度属性

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

imagesLoaded未被弃用：

---

我发现：

Object[Object Object]在id使用imagesLoaded时没有方法“imagesLoaded”

很抱歉没有包含imagesLoaded.js。谢谢，但现在三栏变成了两栏。我试着摆弄css。你有什么解决办法吗？嗨。。你能看看这个吗？尽管使用了imagesLoaded，但我还是在努力解决这个问题，然后我意识到我嵌入的Google字体是在图像之后加载的，因此会被丢弃。很好的解决方案：。这帮助我解决了这个问题，它发生在平板电脑上。但诀窍是在砖石结构中添加“布局”，如：$container.mashine（'layout'）；

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

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

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