如何使用 jQuery Masonry 添加无限滚动？

Posted 2023-03-11

【中文标题】如何使用 jQuery Masonry 添加无限滚动？

【英文标题】：How do I add infinite scroll with jQuery Masonry?

【发布时间】：2013-03-15 20:00:58

【问题描述】：

我正在尝试将无限滚动与我当前使用一种 jQuery Masonry 的网站结合起来。我试图理解 javascript（和一般的 html）的语言和基本功能，但它可能会让人不知所措。我还看到了向网页添加无限滚动的不同方法，包括使用 php。基本上，我对哪种方法最适合我的网站没有方向感。非常感谢任何提示或帮助。对于我对这个话题缺乏了解，我深表歉意，但我只是觉得这太过分了......@_@

这是我的网站。这是我个人的艺术品收藏： http://themptyrm.com

【参考方案1】：

Infinite Scroll，我在我的项目中尝试过一次，所以这里有一些我迄今为止使用过的参考资料..

https://github.com/paulirish/infinite-scroll

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

jScroll 是一个用于无限滚动的 jQuery 插件，由 Philip Klauzinski 编写。无限滚动;也称为延迟加载、无限滚动、自动分页器、无限页等；当您向下滚动时，能够在当前页面或内容区域内通过 AJAX 加载内容。每次滚动到现有内容的末尾时，可以自动加载新内容，也可以通过单击现有内容末尾的导航链接触发加载。

http://jscroll.com/

希望对你有帮助。

【讨论】：

你也可以用这个...infinite-scroll.com/infinite-scroll-jquery-plugin

【参考方案2】：

将其添加到您的 html 文件中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script src="../js/jquery.infinitescroll.min.js"></script>

并添加这个，在这里你可以指定无限滚动选项

<script type="text/javascript">
var $container = $('#container');
$container.infinitescroll(
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // 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 ) 
    var $newElems = $( newElements );
    $container.masonry( 'appended', $newElems );
  
);
</script>

顺便说一句，您的页面看起来很棒

如果您有更多疑问，请点击此处Masonry with Infinite scroll

【讨论】：

多年来我一直在寻找解决方案。这个 sn-p 在更改选择器后立即起作用。