Ajaxで動的に追加された要素をmasonryで再配置する

Question

WordPressを使った記事一覧で、Ajaxで記事を取得し、一覧に追加する仕組みを作っています。
その際、記事をタイル状に並べるためmasonryを使っているのですが、
Ajaxで追加された分の記事がうまく配置できません。
既に表示されている記事の後ろに重なって表示されてしまいます。

以下にコードを載せます。
jsのプログラミングにくわしいかたご教示お願いします。

●masonry部分

<script>
$(function(){
//メイソンリー
$('#mason-wrap').imagesLoaded(function(){
  $('#mason-wrap').masonry({
  itemSelector: ".grid",
  columnWidth: ".grid.normal",
  isAnimated: true,
  isResizable: true,
  gutterWidth: 0,
  });
 });
});
</script>

●ajax部分

<script>
					//Ajax
					var now_post_num = 2; // 現在表示されている数
					var get_post_num = 2; // 一度に取得する数
					var load_btn = $("#more-disp a");
					var post_type = "<?php echo get_post_type(); ?>";
					var templete_dir_uri = "<?php echo get_template_directory_uri(); ?>"+"/ajax-load.php";
					var count_posts = "<?php echo $count_post->publish; ?>";
					if(now_post_num >= count_posts){
						$("#more-disp").hide();
					}
					$(function(){
						$(document).on("click", "#more-disp a", function(){
							$.ajax({
								type: 'post',
								url: templete_dir_uri+'/ajax-load.php',
								data: {
									'now_post_num': now_post_num,
									'get_post_num': get_post_num,
									'post_type':post_type,
								},
								success: function(data){
									now_post_num = now_post_num + get_post_num;
									data = JSON.parse(data);
									$("#mason-wrap").append(data['html']);
									$("#more-disp").remove();
									console.log(data);
									if (!data['noDataFlg']){
										$("#mason-wrap").after('<div id="more-disp"><a href="javascript:void(0);">もっと見る</a></div>');
									}
								}
							});
							return false;
						});
					});
					</script>

●html

<ul id="mason-wrap" class="cl">
							<?php
							$counter = 0;
							if(have_posts()):
								while(have_posts()): the_post(); ?>
								<li class="grid <?php echo ($counter == 0) ? 'first':'normal'; ?>">
									<a href="<?php the_permalink(); ?>">
										<div class="post-fig">
											<?php the_automatic_thumbnail_url(get_template_directory_uri()."/common/img/base/noimage_xl.png", "tmb_cut_760x450"); ?>
										</div>
										<p class="time"><?php the_time("Y.m.d"); ?></p>
										<h2><?php the_title(); ?></h2>
										<?php if($counter == 0): ?>
											<div class="ex"><?php echo nl2br(get_the_excerpt()); ?></div>
										<?php endif; ?>
										<div class="gray-switch">
											<span>詳しくはこちら</span>
										</div>
									</a>
								</li>
								<?php $counter++; ?>
								<?php endwhile; ?>
							<?php endif; ?>
						</ul>

Answer 1

Ajaxをやめページングにすることで回避しました。
ありがとうございます。

Answer 2

試していませんが、これでどうでしょうか。

Recollects all item elements.

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

Answer 3

$("#mason-wrap").append(data['html']);

この部分でajaxで取得したhtmlコードをappendしていると思いますが、追加されたコードにはmasonryは適用されていません。

DOMに対するJavascriptの操作は実行した瞬間にhtml上に存在するDOMに対して適応されます。

なので、一番最初はhtmlがあり、その後masonryが呼び出されるので正しく配置されます。

Ajax通信後、appendしたhtmlに対してはまだjavascriptが読み込まれていないので、append後、再度masonryを実行してあげるといいかもしれません。