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

时间:2013-03-26 05:32:38

标签: scroll infinite

我正在尝试将无限滚动与我当前使用一种jQuery Masonry的网站合并。我试图理解javascript(和一般的html)的语言和基本功能,但它可能是非常压倒性的。我也看到了向网页添加无限滚动的不同方法,包括使用php。基本上,对于我的网站最好的方法,我没有方向感。任何提示或帮助非常感谢。我为这个话题缺乏知识而道歉,但我觉得这完全超出了我的想法...... @ _ @

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

2 个答案:

答案 0 :(得分:22)

在你的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

答案 1 :(得分:5)

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/

希望它有所帮助。