如何用砖石设置无限滚动？答案

【问题标题】：How to setup infinite scrolling with masonry?如何用砖石设置无限滚动？
【发布时间】：2014-02-04 17:29:36
【问题描述】：

我最近在尝试用砖石在我的 tumblr 上设置无限滚动时遇到了一些问题。我找到了一些代码，它在演示网站上运行良好：http://www.jquery4u.com/demos/infinite-scrolling-demo1/ 但在我的 tumblr 上，只有砌体部分有效，无限滚动部分无效。这是我的 Javascript：

<script>
  $(function(){

    var $container = $('SECTION');

    $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.item',
                columnWidth: '.item',
                isFitWidth: true
            });
        });

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation
      nextSelector : '#nextPage',  // selector for the NEXT link (to page 2)
      itemSelector : '.item',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      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 });
          msnry.appended( $newElems );
        });
      }
    );
  });
</script>

这是下一页链接的html：

{block:Pagination}
<nav id="page-nav">
    {block:NextPage}
        <a style="color:red;" id="nextPage" href="{NextPage}">Next</a>
    {/block:NextPage}
</nav>
{/block:Pagination}

我已经链接了 Masonry、ImageLoaded 和 Infinite Scrolling 脚本。正如我所说，砌体工作正常，但无限卷轴似乎什么也没做。下一个链接也可以使用，因为我对其进行了测试，并且确实将我带到了下一页。但是，无限滚动再次没有任何作用。如果有人可以提供帮助，将不胜感激，或者如果您有任何其他建议或替代方案，那也很好。

【问题讨论】：

那么你是如何加载更多图片的？
使用无限滚动插件，它应该在您滚动到页面底部时自动加载下一页，例如：jquery4u.com/demos/infinite-scrolling-demo1 但由于某种原因它没有这样做，即使它使用几乎相同的代码。

标签： javascript jquery html css tumblr

【解决方案1】：

没有演示链接很难说，但是看看你用来参考的例子：

msnry.appended( $newElems );

应该抛出一个错误说undefined。这是由于msnry.appended。

该行应该是：

$container.masonry( 'appended', $newElems, true );

来源：http://www.jquery4u.com/demos/infinite-scrolling-demo1/

【讨论】：