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

Question

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

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

Answer 1

将此添加到您的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>

就像你的页面看起来很棒

如果你有更多疑惑,请到这里砌成无限卷轴

Answer 2

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/

希望能帮助到你.