如何在原生JavaScript脚本中添加msnry.reloadItems()方法

嘿，作为刚接触JS/AJAX的新手，能自己折腾出基础代码已经很棒啦！针对你的需求，要把msnry.reloadItems()整合到脚本里，其实关键是在Infinite Scroll加载新内容完成后，调用Masonry的重载和重新布局方法，具体步骤如下：

1. 确保Masonry正确初始化 #

首先你需要把Masonry的实例变量msnry放在全局（或者Infinite Scroll能访问到的作用域），避免作用域问题找不到它。完善你的初始化代码：

var grid = document.querySelector('.container');
var msnry; // 提前声明，让后续代码能访问到

// 等网格里的图片都加载完再初始化Masonry
imagesLoaded(grid, function() {
  msnry = new Masonry(grid, {
    itemSelector: '.post', // 替换成你WordPress里文章/项目的实际类名
    // 可选：如果需要固定列宽，加上这个配置
    // columnWidth: '.grid-sizer'
  });
});

2. 结合Infinite Scroll，在新内容加载后调用reloadItems() #

当Infinite Scroll加载并追加新内容后，你需要告诉Masonry“识别这些新元素”并重新布局。配置Infinite Scroll的append回调事件：

// 初始化Infinite Scroll（适配WordPress的分页结构）
var infScroll = new InfiniteScroll(grid, {
  path: '.pagination .next', // WordPress默认下一页链接的选择器，根据你的主题调整
  append: '.post', // 要追加的项目选择器，和上面Masonry的itemSelector一致
  status: '.loading-status', // 可选：加载状态提示元素
  history: false // 根据你的分页需求调整，要不要修改浏览器历史
});

// 当新内容被成功追加后触发
infScroll.on('append', function(response, path, newItems) {
  // 先等新内容里的图片加载完成，避免布局错乱
  imagesLoaded(newItems, function() {
    // 让Masonry重新识别所有项目（包括新加载的）
    msnry.reloadItems();
    // 重新执行布局，让新元素正确排列
    msnry.layout();
  });
});

3. 关键注意点 #

• 作用域问题：一定要把msnry变量放在全局或者Infinite Scroll能访问到的地方，别把它藏在imagesLoaded的回调函数里，不然后续调用会报错msnry is not defined。
• 图片加载监听：不管是初始化还是加载新内容，都要用imagesLoaded包裹，因为图片加载慢于DOM，直接初始化Masonry会导致布局错位。
• WordPress适配：记得替换代码里的选择器（比如.post、.pagination .next）为你当前主题实际使用的类名，不同主题的分页、文章容器类名可能不一样。

内容的提问来源于stack exchange，提问作者Galgóczi Levente