如何将 msnry.reloadItems() 添加到原始 JS 脚本

Question

我对 js、javascript、ajax 等非常陌生，我正在使用 php 并且只构建 wordpress 站点。今天我尝试在我的网站上制作混合分页，有人称之为 "HolyScroll or Holy Scroll"，目标是： http://scrollsample.appspot.com/items

所以我使用 Desandro 的 Masonry 开发无限 scroll.com，我的代码现在看起来像这样（我在过去 5 小时内完成了...）：

var grid = document.querySelector('.container');
var msnry;

imagesLoaded( grid, function() {
  // init Isotope after all images have loaded
  msnry = new Masonry( grid, {
    itemSelector: '.item'
  });
});

// -----------

var elem = document.querySelector('.container');
var infScroll = new InfiniteScroll( elem, {
  // options
  path: 'page/{{#}}/',
  append: '.item',
  history: 'push',
  historyTitle: true,
  prefill: true,
// load pages on init until user can scroll
scrollThreshold: 1000,
// trigger scrollThreshold event when viewport is <100px from bottom of scroll area
status: '.page-load-status',
});

// element argument can be a selector string
//   for an individual element
var infScroll = new InfiniteScroll( '.container', {
  // options
});

无限滚动、历史、砌体（仅在第一次调用时）和已加载图像终于可以工作了，现在需要将 reloadItems 选项粘贴到此，但不工作... 这是指南：https://masonry.desandro.com/methods.html#reloaditems

拜托，有人可以帮助我吗？我找不到使用 Vanilla JS 的简单教程，反过来 JQuery 版本不适合我...

*不幸的是Markovsk我引起了我的注意不是每个人都能点击link，所以我在这里复制，Desandro在他的网站上写的：

"For frameworks like Angular and React, reloadItems may be useful to apply changes to the DOM to Masonry."

 // vanilla JS
 msnry.reloadItems()

Answer 1

所以这里是 "Holy Scroll"，混合，ajax / js 加载无限滚动分页，搜索引擎喜欢什么，所以这完全用户和 SEO 友好：

来源站点：
https://infinite-scroll.com/
https://masonry.desandro.com/
https://imagesloaded.desandro.com/

所以，我刚刚学习 php，我只是网页设计师，在我意识到之后，所有 wordpress 插件都向你承诺 "infinite scroll"（比如 Ajax 加载更多，Ajax Pagination & infinite Scroll、DMD Infinite Scroll、Jetpack、YITH Infinite Scroll 等）rip-off 如果你在没有许可证的情况下使用这些插件，我会杀死你所有的 SEO，我开始在网上寻找解决方案。第一次面面相觑Google' 站长中心博客：
https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html

所以在这篇文章之后我知道我想要什么，但到那时，我发现它是关键字（因此：关于无限滚动的浏览器历史）和一个简单的事实，现在需要构建我的砖石布局（因为到目前为止，我使用的是 Ajax Load More 插件，这对我来说就像砖石一样），所以我从来没有学习过 JS ...我在过去的 ~35 小时内致力于此，但你可以立即学会自己做，就像你一直在读的那样。（长篇介绍服务关键词，这里也找你。）

因此，您可以根据此官方指南修改无限滚动选项：
https://infinite-scroll.com/options.html
非常重要的是，您需要的是：
https://infinite-scroll.com/options.html#history

因此，将这些链接（或按照以下步骤：https://infinite-scroll.com/#install）放入页脚（或页眉，但 Google 建议在页脚中调用 .js 和 .css 文件，从而减少页面加载。):
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

这里是完整的 "Holy Scroll" 代码，带有砌体布局，使用加载的图像 (imagesLoaded)，因此不再重叠您的图像。
只需将此代码放在您的页脚之间： <script></script>

  var grid = document.querySelector('.container');
  var msnry = new Masonry( grid, {
    itemSelector: '.youritem', // select none at first
  });

  // initial items reveal
  imagesLoaded( grid, function() {
    msnry.options.itemSelector = '.youritem';
    var items = grid.querySelectorAll('.youritem');
    msnry.reloadItems( items ); // This reload the masonry layout after the first call
    msnry.layout(); // This restrain the overlapping on the first call
  });

  //-------------------------------------//
  // init Infinte Scroll

  var infScroll = new InfiniteScroll( grid, {
    // options
    path: 'page/{{#}}/', // YOUR PAGINATION STRUCTURE !!!IMPORTANT!!! REPLACE IT
    append: '.youritem',
    history: 'push',
    historyTitle: true,
    prefill: true,
  // load pages on init until user can scroll
  scrollThreshold: 1000,
  // trigger scrollThreshold event when viewport is <100px from bottom of scroll area
// (I using 1000, that my users never have to wait for the loading of the next page...
// The calling it will start to working, before the screen shows the bottom of the page...)
  status: '.page-load-status',
  outlayer: msnry,
  });

好的，所以将 .container 替换为包含项目（项目 = 帖子、图像等）的站点容器，并将 .youritem 替换为您的网格项目（因此 div 什么包括一项）！
非常重要的是，您将路径的值替换为您的分页结构，其中当前页面的编号为 {{#}}！（因此，如果您的网站是这样工作的：yourdomain.com/page/2/ 您的路径值为：'page/{{#}}/'）

最后，您使用 .css 进行设计（包括砌体参数（宽度等）！）

如何将 msnry.reloadItems() 添加到原始 JS 脚本

How to add msnry.reloadItems() to vanilla JS script

javascript

infinite-scroll

masonry