如何设置无限滚动的增量

Question

我正在通过php查询和json动态加载图像。截至目前，所有图像均立即显示。我发现Infinite Scroll和checkLastPage option似乎是我想要的解决方案（至少是演示所显示的内容）。我想要的是先显示9张图像，然后单击“更多”按钮（对我不显示）时再显示9张其他图像。

由于图像是在单击类别后动态填充的，所以我将无限滚动代码包裹在更改函数中。

我该怎么做？

$('#projectGallery').on('change', function(e)  {
    var infScroll = new InfiniteScroll( '#projectGallery', {
      // defaults listed

      path: '.pagination__next',
      // REQUIRED. Determines the URL for the next page
      // Set to selector string to use the href of the next page's link
      // path: '.pagination__next'
      // Or set with {{#}} in place of the page number in the url
      // path: '/blog/page/{{#}}'
      // or set with function
      // path: function() {
      //   return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );
      // }
        /*path: function() {
          // no value returned after 4th loaded page
          if ( this.loadCount < 4 ) {
            var nextIndex = this.loadCount + 2;
            return '' + nextIndex + '.html';
          }
        },*/

      append: undefined,
      // REQUIRED for appending content
      // Appends selected elements from loaded page to the container

      checkLastPage: true,
      // Checks if page has path selector element
      // Set to string if path is not set as selector string:
      //   checkLastPage: '.pagination__next'

      prefill: false,
      // Loads and appends pages on intialization until scroll requirement is met.

      responseType: 'document',
      // Sets the type of response returned by the page request.
      // Set to 'text' to return flat text for loading JSON.

      outlayer: false,
      // Integrates Masonry, Isotope or Packery
      // Appended items will be added to the layout

      scrollThreshold: 400,
      // Sets the distance between the viewport to scroll area
      // for scrollThreshold event to be triggered.

      elementScroll: false,
      // Sets scroller to an element for overflow element scrolling

      loadOnScroll: true,
      // Loads next page when scroll crosses over scrollThreshold

      history: 'replace',
      // Changes the browser history and URL.
      // Set to 'push' to use history.pushState()
      //    to create new history entries for each page change.

      historyTitle: true,
      // Updates the window title. Requires history enabled.

      hideNav: undefined,
      // Hides navigation element

      status: undefined,
      // Displays status elements indicating state of page loading:
      // .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error
      // status: '.page-load-status'

      button: '.load-next-button',
      // Enables a button to load pages on click
      // button: '.load-next-button'

      onInit: undefined,
      // called on initialization
      // useful for binding events on init
      // onInit: function() {
      //   this.on( 'append', function() {...})
      // }

      debug: true,
      // Logs events and state changes to the console.
    })
});

HTML-单击类别后动态加载图像的位置。

<div id="projectGallery"></div>