jquery-masonry - jQuery Masonry 无限滚动和图片与我的 tumblr 主题重叠问题

Question

我是编程新手(javascript)，但为了使我的 tumblr 主题正常工作，过去几天我做了很多研究。我知道我的问题很常见，但似乎我没有足够的知识来正确集成许多类似示例中给出的代码部分。

My theme应该覆盖 tumblr 的“每页 15 个帖子”的限制，并通过“无限滚动”选项将我的所有帖子(所有图片)放在一个无尽的页面中。嗯，它没有。在 here 的帮助下，我设法将我的 {block:Posts} 包裹起来，并在 masonry() 调用中进行了一些随机更改，我最终得到了 this

正如你所看到的，我的图片没有重叠(终于!)但是在 15 个第一次发布之后，它看起来像是创建了一个新页面并且最后一张图片没有正确对齐。

我的 jQuery 砌体代码是这样的:

<script type="text/javascript">

$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').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 : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>

我知道，这是一团糟...
真的很感激一些帮助。

Answer 1

我不习惯使用 tumblr，但我知道发生了什么:

Line 110:

每次调用 masonry 时，此脚本都会在条目周围创建一个包装 div，因为该脚本，每次加载看起来都像一个新页面，我认为您可以简单地将其删除。

一些技巧:
你不必等待 $(windows).load 来执行砌体，通过 $(function()

为避免图像重叠使用附加的砌体方法和图像加载:Refer this

我看到您使用的是 masonry 1.0.1，请确保您使用的是 masonry 最新版本 (2.1.06)

示例代码:

$(function() {
    //$('.autopagerize_page_element').masonry();
    var $container = $('.autopagerize_page_element');
    //wait until images are loaded
    $container.imagesLoaded(function(){
      $container.masonry({itemSelector: '.entry'});
    });
$('.autopagerize_page_element').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: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
    }
);
});

并确保删除此标题块中的最后一个脚本:

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

希望能帮助到你