Question

第一次来这里。我正在尝试使用Masonry插件创建我的自定义tumblr主题3列，但我不是很顺利。帖子重叠，我甚至没有使用Infinite Scroll。我试图使用$（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所说，我只需要将砌体代码放在$（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放在砌筑里面，但是我仍然会尝试让这个布局根据窗口大小改变它的布局，当我获得成功时，我会在这里更新。但目前重叠的问题已经解决了。

Answer 1

你的js有些错误。

您在容器变量中缺少$ for 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重叠

1 个答案: