2

所以我现在正在开发我的 Tumblr 主题。我正在使用 Masonry 将我的所有帖子放在 5 列网格中，并使用无限滚动脚本在我向下滚动时将新图像加载到网格中。不幸的是，当我向下滚动时，大多数时候图像是重叠的。我发现问题可能是在加载图像之前触发了 Masonry，但现在我不知道如何解决这个问题。我已经在使用 (window).load 而不是 (document).ready 但图片仍然重叠。这是完整的代码片段：

<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js">
</script>
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">


$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : "",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script>

有没有人知道如何让它工作？任何帮助，将不胜感激！

4

1 回答 1

1

Masonry 是在您的图像加载之前绝对放置物品并占用更多空间。利用 Jquery imagesLoaded 来克服这个问题。您可能希望最初隐藏您的元素，然后在它们完成加载后显示它们。尝试这样的事情：

//Wire masonry onto the photolist with whatever defaults you need
$photolist.imagesLoaded(function () {
    $photolist.masonry({
        // options
        itemSelector: '.photo',
        columnWidth: 226,
        isFitWidth: true,
        gutterWidth: 12
    });
});
于 2013-05-04T17:06:38.203 回答