Question

不确定我做错了什么。砌体起作用，但无限卷轴不起作用。我试图建立最简单的Masonry / InfiniteScroll主题。我尝试了很多不同的方法，但我仍然陷入困境。

    <title>{title}</title>
    <meta name="description" content="{MetaDescription}" />
    <link rel="shortcut icon" href="{Favicon}">

    <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script> 
<script type="https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#container');
$content.masonry({itemSelector: '.item', columnWidth:300
});
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.item'
});
});
</script>

<style>
    .item{width:300px;}
    img{max-width:100%;}
</style>  

  </head>
  <body>
<div id="container">        
{block:Posts}

{block:Photo}
<div class="item"><img src="{PhotoUrl-500}" title="{PhotoAlt}"/></div>
{/block:Photo}


{/block:Posts}  
</div><!--wall-->  

{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>
  </body>
</html>

Answer 1

如果你愿意，也许你可以使用这个代码，这是我迄今为止找到的最好的代码：

<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
    <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

    <script type="text/javascript">
    $(window).load(function(){
    var $wall = $('.posts');
    $wall.imagesLoaded(function(){
    $wall.masonry({
    itemSelector: '.entry',
    isAnimated : false
    });
    });

    $wall.infinitescroll({
    navSelector : "div#navigation",
    nextSelector : "div#navigation a#nextPage",
    itemSelector : ".entry",
    bufferPx : 2000,
    debug : false,
    errorCallback: function() {
    $('#infscr-loading').fadeOut('normal');
    }},
    function( newElements ) {
    var $newElems = $( newElements );
    $newElems.hide();
    $newElems.imagesLoaded(function(){
    $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
    });
    }); $('.posts').show(500);
    });
    </script>
<script>
    $.fn.changebackgroundColor = function(msg) {
    $("#perma").css("#000");
  };
</script>

我对它的无限滚动没有任何问题，它相当简单。您应该检查Selector和var名称以放置主题中的那些。除此之外，我认为问题可能是你正在使用的脚本。尝试使用不同的。我曾经和你的有些相似，我意识到当我调试我的页面时他们甚至没有回应。这可能是一个类似的问题。

需要Infinitescroll才能使用简单的Masonry tumblr

1 个答案: