嘿，这个问题我之前帮不少WordPress开发者解决过，核心原因其实很明确——Masonry没“察觉到”你AJAX新加载的文章，自然不会帮你重新调整网格布局～

Masonry的工作逻辑是在页面初始DOM加载完成后，遍历所有目标元素，计算它们的尺寸、位置来构建错落有致的网格。但Easy Load More这类AJAX插件加载新内容时，是把新文章的DOM元素悄悄追加到页面里的，这时候Masonry早就完成了初始布局计算，根本不知道有新元素进来，所以新文章会直接堆在最左侧，甚至挤到页脚，完全破坏原有网格。

1. 用Masonry官方的appended()方法（最推荐） #

这是Masonry专门为动态添加元素设计的方法，只要在AJAX加载完成后调用它，就能告诉Masonry“有新元素啦，快重新排一下”。

你需要找到Easy Load More的AJAX完成回调（插件一般会提供自定义JS事件，或者可以修改加载完成的函数），然后添加这段代码：

// 先获取你的Masonry容器，比如容器类是'.masonry-grid'
var $grid = $('.masonry-grid').masonry();

// 当AJAX加载完新文章后，执行下面的代码
// 假设新加载的文章类是'.post-card'
var $newPosts = $('.post-card').not('.masonry-initialized');
$newPosts.addClass('masonry-initialized');

// 通知Masonry处理新元素
$grid.append($newPosts).masonry('appended', $newPosts);

如果Easy Load More自带回调事件（比如它的elm_loaded事件），可以这么写：

$(document).on('elm_loaded', function() {
  var $grid = $('.masonry-grid').masonry();
  var $newPosts = $('.post-card').not('.masonry-initialized');
  $newPosts.addClass('masonry-initialized');
  $grid.append($newPosts).masonry('appended', $newPosts);
});

2. 强制重新初始化Masonry（简单但效率稍低） #

如果找不到合适的回调钩子，也可以在AJAX加载完成后直接重新初始化Masonry——虽然会重新计算所有元素的布局，但对于博客这类内容量不大的场景，基本不会有性能问题：

$(document).on('elm_loaded', function() {
  $('.masonry-grid').masonry({
    // 这里填你原来的Masonry配置，比如：
    itemSelector: '.post-card',
    columnWidth: '.grid-sizer',
    gutter: 20
  });
});

3. 检查插件的Masonry兼容开关 #

有些加载更多插件会自带Masonry适配选项，你可以去Easy Load More的后台设置页面看看，有没有“启用Masonry支持”或者“加载完成后触发布局更新”的开关，打开它可能不用写代码就能解决问题！

4. 确保新加载的文章类名正确 #

有时候布局混乱是因为新加载的文章缺少Masonry要求的类名（比如你在Masonry配置里指定的itemSelector类），检查一下新加载的文章HTML结构，和页面初始加载的文章是否完全一致，类名有没有遗漏。

如果你的文章里包含图片，最好等图片加载完成后再调用Masonry的方法，否则尺寸计算会出错。可以配合imagesLoaded插件来处理：

$grid.append($newPosts).imagesLoaded().progress(function() {
  $grid.masonry('appended', $newPosts);
});

内容的提问来源于stack exchange，提问作者Adam Bell