砌体与 Tumblr 中没有无限滚动的 ImagesLoaded 重叠

Question

第一次来。我正在尝试使用 Masonry 插件创建包含 3 列的自定义 tumblr 主题，但进展并不顺利。这些帖子是重叠的，我什至没有使用 Infinite Scroll。我尝试使用 $(window).load(...) 但它没有用，我尝试使用 ImagesLoaded 但它也没有用，请帮助我 ^-^ 这是页面加载的方式：http://s16.postimg.org/u17syta51/image.jpg, if I resize/refresh the page they go to the right position. This is my full code: http://pastebin.com/VLzwEfgP，我的测试 tumblr url 是 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(); 之前，因为脚本将我的容器宽度更改为 800px（仅制作 1 列），当我在激活脚本之前设置变量时，它不会改变它的宽度，我可以将 isResizeBound: false 放在砖石结构中，但我仍然会尝试根据 window 大小更改此布局，当我成功时我会在这里更新。但是现在重叠的问题已经解决了。

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?

砌体与 Tumblr 中没有无限滚动的 ImagesLoaded 重叠

Masonry overlapping with ImagesLoaded without Infinite Scroll in Tumblr

jquery

masonry