如何使用jQuery Masonry添加无限滚动? [英] How do I add infinite scroll with jQuery Masonry?

问题描述

我正在尝试将无限滚动与当前使用某种类型的jQuery Masonry的网站合并.我正在尝试了解javascript(以及一般而言html)的语言和基本功能，但可能会让人不知所措.我还看到了将无限滚动添加到网页的不同方法，包括使用php.基本上，对于哪种方法是我的网站的最佳方法，我没有方向感.任何提示或帮助，我们将不胜感激.我很抱歉，我对这个主题缺乏知识，但是我只是觉得这太过头了... @ _ @

I am trying to incorporate infinite scroll with my current web site that is using a type of jQuery Masonry. I am trying to understand the language and the basic function of javascript (and html in general), but it can be quite overwhelming. I am also seeing different methods to add infinite scroll to a web page, including the use of php. Basically, I have no sense of direction as to which is the best method for my web site. Any tips or help is greatly appreciated. And I apologize for my lack of knowledge regarding this topic, but I just feel this is quite over my head... @_@

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

Here is my web site. It is my personal artwork collections: http://themptyrm.com

推荐答案

将此添加到您的html文件中

add this in your html file

<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>

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

and add this, here you can specify infinite scroll options

<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>

页面看起来很棒

如果您还有更多疑问，请点击此处砌体无限滚动

if you have more doubts go here Masonry with Infinite scroll

这篇关于如何使用jQuery Masonry添加无限滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！