4

我正在研究一个 tumblr 主题，我试图将砖石与无限滚动结合起来。虽然砖石工程，但只要我添加无限滚动，事情就会开始破裂。第二页内容出现在第一页内容的后面，当我单击“下一页”时，它会将我带到第 2 页，而不是在第 1 页底部加载新元素。

我尝试通读无限滚动和砖石文档，查看 StackOverflow 上的类似问题，并使用我的 HTML 结构和 Javascript 设置，但到目前为止我一点运气都没有。有人可以看看我的代码并让我知道我做错了什么吗？我想要发生的是当用户单击“下一页”时，页面 2 中的新元素会加载到底部。

这是我的测试 tumblr 网址：http : //masoninfinite.tumblr.com/，这是我的代码的 pastebin：http: //pastebin.com/KnbxNnES，我也会在下面发布。我非常感谢我能得到的任何帮助。

<html>
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://static.tumblr.com/bpwficy/Ahjm97maz/masonry.js"></script>
    <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

    <script>

    $(function(){

      var $container = $('#container');

      $container.imagesLoaded( function(){
        $container.masonry({
          itemSelector : '.post',
          columnWidth : 300,
          gutterWidth: 30,
          isAnimated: true
        });
      });

          $container.infinitescroll({
            navSelector  : '.navigation',    // selector for the paged navigation 
            nextSelector : '.nav-previous a',  // selector for the NEXT link (to page 2)
            itemSelector : '#container .post',     // selector for all items you'll retrieve
            },

            // call Masonry as a callback
                function( newElements ) {
                    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>

    <style>

    #container { border: 1px solid blue; width: 960px; margin: 0px auto; }

    .post { margin-bottom: 20px; border: 1px solid red; width: 300px; background: #ccc; }

    img { width: 200px; height: 200px; }

    </style>
</head>
<body>
    <h1>{Title}</h1>

    {block:Description}
        <p id="description">{Description}</p>
    {/block:Description}

    <div id="container">
            <div class = "autopagerize_page_element" >
    <ol id="posts">
        {block:Posts}
            {block:Text}
                <li class="post text">
                    {block:Title}
                        <h3><a href="{Permalink}">{Title}</a></h3>
                    {/block:Title}

                    {Body}
                </li>
            {/block:Text}

            {block:Photo}
                <li class="post photo">
                    <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
            {/block:Photo}

            {block:Photoset}
                <li class="post photoset">
                    {Photoset-500}

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
            {/block:Photoset}

            {block:Quote}
                <li class="post quote">
                    "{Quote}"

                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
                </li>
            {/block:Quote}

            {block:Link}
                <li class="post link">
                    <a href="{URL}" class="link" {Target}>{Name}</a>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
                </li>
            {/block:Link}

            {block:Chat}
                <li class="post chat">
                    {block:Title}
                        <h3><a href="{Permalink}">{Title}</a></h3>
                    {/block:Title}

                    <ul class="chat">
                        {block:Lines}
                            <li class="{Alt} user_{UserNumber}">
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}

                                {Line}
                            </li>
                        {/block:Lines}
                    </ul>
                </li>
            {/block:Chat}

            {block:Video}
                <li class="post video">
                    {Video-500}

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
            {/block:Video}

            {block:Audio}
                <li class="post audio">
                    {AudioPlayerBlack}

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
            {/block:Audio}
        {/block:Posts}
    </ol>
    </div>

    </div>

    <p id="footer">
    <div class="navigation">
        {block:PreviousPage}
            <a href="{PreviousPage}">&#171; Previous</a>
        {/block:PreviousPage}

        {block:NextPage}
        <div class="nav-previous">
            <a href="{NextPage}">Next &#187;</a>
        </div>
        {/block:NextPage}
    </div>

        <a href="/archive">Archive</a>
    </p>
</body>

4

1 回答 1

2

想通了我的问题，我准备打自己耳光。

我使用了一些 Tumblr 特定的无限滚动代码（http://codysherman.com/tools/infinite-scrolling/code），而不是来自infinite-scroll.com 的实际无限滚动代码。

于 2012-08-31T15:55:07.130 回答