砌体div即使在使用图像后也会重叠加载

Question

我正在使用砖石+图像加载到一个包含多个图像的div的流体容器（没有无限滚动），div的列数根据屏幕尺寸而变化。我也在使用 1 种谷歌网络字体。

我的问题是图像加载似乎不起作用？ 我的容器的div 仍然重叠。

我的脚本（我在这个块之前包含了最新的jquery，砖石和图像加载的脚本，以及开始头标签附近的谷歌网络字体链接href）：

$(function() {
        var $posts = $('#posts');
        $posts.imagesLoaded(function(){
            $posts.masonry({
                isFitWidth:true,
                colummnWidth:600,
                itemSelector:'.post',
                isAnimated:true,
                transitionDuration:'.5s'
            });
        });
    });

和相关的 CSS（不多）

#posts {
    z-index:98;
    position:absolute!important;
    height:auto!important;
    margin:auto;
    left:0;
    right:0;
    top:40%; }
.post {
    float:left;
    position:relative;
    padding:25px;
    width:500px;
    margin:75px 50px 100px; }

我的 css 中有什么冲突吗？我已经尝试了与我相同的问题的其他答案，但我的布局仍然不起作用。如果您需要一个活生生的例子，请告诉我。

Answer 1

请尝试David DeSandro在文档中发布的示例js。

http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

我遇到了同样的问题，我将我的 columnWidth 切换到像他这样的选择器，并添加了 percentPosition 和装订线，这解决了我的问题。

.JS

var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    gutter: 20,
    columnWidth: '.grid-sizer'
  });
 });