jquery – 在Tumblr上用石工打破的无限卷轴

2019年8月4日 209次阅读

我正在研究一个tumblr主题,我正在尝试将砌体与无限卷轴结合起来.虽然砌体有效,但只要我加入无限滚动的东西就会开始破碎.第二页内容出现在第一页内容后面,当我点击“下一页”时,它将我带到第2页而不是在第1页底部加载新元素.

我已经尝试阅读无限滚动和砌体文档,查看StackOverflow上的类似问题,并使用我的HTML结构和Javascript设置,但到目前为止我根本没有运气.有人可能会看看我的代码并让我知道我做错了什么吗？我想要发生的是当用户点击“下一页”时,第2页的新元素会在底部加载.

这是我的测试tumblr网址：http://masoninfinite.tumblr.com/,这是我的代码的粘贴框：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>

最佳答案 弄清楚我的问题,我准备打击自己的脸了.

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

点赞