無限滾動打破與石工在Tumblr

我正在一個tumblr主題，我試圖結合石工與無限滾動。雖然砌體工程，只要我添加無限滾動的東西開始打破。第二頁內容出現在第一頁內容的後面，當我點擊「下一頁」時，它將帶我到第2頁，而不是在第1頁的底部加載新元素。無限滾動打破與石工在Tumblr

我試過閱讀無限的滾動和磚石文檔，在StackOverflow上查看類似的問題，以及使用我的HTML結構和Javascript設置，但到目前爲止，我一直沒有運氣。有人可能會看我的代碼，並讓我知道如果我做錯了什麼？我想要發生的是當用戶點擊「下一頁」時頁面2中的新元素加載到底部。

這裏是我的測試tumblr url：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>

來源

2012-08-31 John

想通了我的問題，我正要準備拍自己的臉。

我使用了一些Tumblr特定的無限滾動代碼（http://codysherman.com/tools/infinite-scrolling/code），而不是來自infinite-scroll.com的實際無限滾動代碼。

來源

2012-08-31 15:55:07 John

無限滾動打破與石工在Tumblr

回答

相關問題