InfiniteScroll-如何重置所有网格？

问题描述

我正在使用InfiniteScroll：

var infScroll = new InfiniteScroll( '.grid',{
  path: function() {

    var pageNumber = ( this.loadCount + 1 );

    var apiUrlQuery = $('.pagination__next').attr('href') + '&page=' + pageNumber;

    return apiUrlQuery;
  },responseType: 'text',status: '.scroll-status',history: false
});

但是现在我需要实现搜索，这意味着我需要刷新路径和网格。怎么做？

到目前为止，我所做的是：

$('.search-events').on('click',function() {

  infScroll.destroy();

  /* building search query */

  $('.grid-item').remove(); //Remove items visually from the grid

  var apiUrlQuery = baseUrl + "&" + searchBy + "=" + searchTerm;
  $('.pagination__next').attr('href',apiUrlQuery); //Update search url

    infScroll.create();

    infScroll.isLoading = false;

    infScroll.loadNextPage();
})

这样，我正在使用新的URL发出新请求并获得结果，但结果没有显示在屏幕上，而且我看到网格的高度仍然与未移除网格的高度相同网格项。

有什么想法吗？

解决方法

我终于成功了：

$('.search-events').on('click',function() {
   msnry.remove($('.grid').find('.grid-item'));
   var apiUrlQuery = baseUrl + "&" + searchBy + "=" + searchTerm;

    $('.pagination__next').attr('href',apiUrlQuery);

    infScroll.isLoading = false;
    infScroll.canLoad = true;
    infScroll.create();

    msnry.layout();

    infScroll.loadNextPage();
})

此行像我使用$（'。grid-item'）。remove（）一样从DOM中删除元素，但也从保存数据的某些内部数组中将其删除。

msnry.remove($('.grid').find('.grid-item'));

我还删除了infScroll.destroy（）;因为它与加载方法解除了绑定。

关键部分是msnry.layout（）;这将重新构建布局。

希望它对以后的人有所帮助。

infinite-scroll javascript jquery