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

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

My theme应该覆盖tumblr的“每页15个帖子”限制,并且通过“无限滚动”选项,它应该将我的所有帖子(所有这些图片)放在一个无尽的页面中.嗯,事实并非如此.在here的一点帮助下,我设法将我的{block：Posts}包裹起来并且在砌体()调用中随机进行了一些更改我最终得到了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>

我知道,它一团糟……
非常感谢一些帮助.

解决方法

我不习惯和tumblr一起工作,但我可以做些什么：

Line 110:

每次调用砌体时,此脚本都会围绕条目创建一个包装器div,因为脚本,每个加载看起来像一个新页面,我想你可以简单地删除它.

一些技巧：
您不必等待$(windows).load来执行砌体,通过$(function()更改它

为避免图像重叠,请使用appened masonry方法和imagesLoad：Refer this

我看到你正在使用砌体1.0.1,请确保你使用的是砖石上一版本(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 NEXT link (to page 2)
itemSelector : ".entry",// 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>-->

希望能帮助到你

原文地址：https://www.jb51.cc/jquery/177213.html