在 Tumblr 中没有无限滚动的情况下，砌体与 ImagesLoaded 重叠

Question

第一次来。 我正在尝试使用 Masonry 插件创建包含 3 列的自定义 tumblr 主题，但我的进展并不顺利。这些帖子是重叠的，我什至没有使用无限滚动。我尝试使用 $(window).load(...) 但它不起作用，我尝试使用 ImagesLoaded 但它也不起作用，请帮助我^-^ 这是页面加载的方式：http://s16.postimg.org/u17syta51/image.jpg，如果我调整/刷新页面，它们会转到正确的位置。这是我的完整代码：http://pastebin.com/VLzwEfgP，我的测试 tumblr 网址是 entertain-us.tumblr.com（我不能放 +2 链接）。 Obs：主题还没有完成，因为我不知道如何解决这个问题。

jQuery（这是在</body> 之前）：

var $container = ('section#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: 'article.post',
        columnWidth: 400,
        isFitWidth: true,
    });
});

CSS

section#container {
    position: relative;
    top: 50px;
    max-width: 1250px;
    height: auto;
    padding: 0px;
}

article.post {
    width: 400px;
    margin: 5px;
    margin-bottom: 10px;
    opacity: 0.7;
}

article.post:hover {
    opacity: 1;
}

将近 2 年我没有编程，所以如果我在代码中犯了任何愚蠢的错误，我会很感激知道哈哈

抱歉有任何英文错误，感谢您的关注：D

--- 解决方案---

为了解决重叠问题，正如 Macsupport 所说，我只需要将 Masonry 代码放在 $(document).ready 中，这样

var $container = $('section#container');    
$(document).ready(function(){       
    $container.imagesLoaded(function(){
        $container.masonry({
            columnWidth: 400,
            itemSelector: 'article.post',
            isFitWidth: true
        });
    });
});

我将var $container = $('section#container'); 放在$(document).ready(); 之前，因为脚本将我的容器宽度更改为 800 像素（仅制作 1 列），当我在激活脚本之前设置变量时，它不会改变它的宽度，我可以放isResizeBound: false 在砖石内部，但我仍然会尝试根据窗口大小更改它的布局，当我成功时，我会在这里更新。但是现在重叠问题已经解决了。

Answer 1

你的 js 有一些错误。

您的容器变量中缺少用于 jquery 的 $：

 var $container = ('section#container');

应该是这样的：

 var $container = $('section#container');

试试这个代码：

    var $container = $('section#container');
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector: 'article.post',
                columnWidth: 400,
                isFitWidth: true
            });
        });

附录

将此代码放入您的

$(document).ready(function(){

 }); 

不是在它之外，就像现在一样。 另外，你为什么要重命名你的 imagesLoaded.js？