Ajax загрузка в Masonry
 

Здравствуйте!
Сайт на Wordpress. Записи блога вывожу в сетку масонри

<div class="row" id="ms-container">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="ms-item">
 		<?php get_template_part( 'content', 'masonry' ); ?>
	</div>
    <?php endwhile;?>
     <?php endif; ?>
	
</div>
<script type="text/javascript">
	
	jQuery(window).load(function() {
		var container = document.querySelector('#ms-container');
		var msnry = new Masonry( container, {
			itemSelector: '.ms-item',
			columnWidth: '.ms-item',                
		});  
		
	});
	
	
</script>

Все отлично работает... но нужно еще заменить пагинацию на aiax загрузку постов по кнопке "Загрузить еще". Я в js не силен, поэтому покопавшись в интернете и с помощью "метода тыка" сделал файл loadmore.js вот с таким кодом:

jQuery(function($){
	$('#true_loadmore').click(function(){
		$(this).text('Загружаю...'); // изменяем текст кнопки
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
			
			


		if( data ) { 
		current_page++; // увеличиваем номер страницы на единицу
				
 $('#ms-container').masonry();	
			
var $items = $(data ); // data is the HTML of loaded posts

$('#ms-container').append( $items ).masonry( 'appended', $items );
$container = $('#ms-container');

$("#ms-container").append().each(function(){
    $('#ms-container').masonry('reloadItems');
});
//$container.masonry();
$('#true_loadmore').text('Загрузить ещё');

					
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});


	
});

Эта штука тоже, вроде как, работает... Но только новые блоки периодически налазят на старые и в конце получается уже совсем не красиво. Вероятно нужно добавить какие-то дополнительные параметры для правильного вычисления.. Помогите пожалуйста.

Igorsrt,
картинки есть в блоках?

Igorsrt,
вариант

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
  <script>
jQuery(function($) {
    $('#true_loadmore').click(function() {
        $(this).text('Загружаю...'); // изменяем текст кнопки
        var data = {
            'action': 'loadmore',
            'query': true_posts,
            'page': current_page
        };
        $.ajax({
            url: ajaxurl, // обработчик
            data: data, // данные
            type: 'POST', // тип запроса
            success: function(data) {
                if (data) {
                    var $items = $(data),
                        $container = $('#ms-container');
                    $container.append($items).imagesLoaded(function() {
                        $container.masonry("appended", $items).masonry("layout")
                    })
                    $('#true_loadmore').text('Загрузить ещё');
                    if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
 });
  </script>

да, картинки есть..
Сейчас попробовал с Вашим кодом - вроде все хорошо получается :)
Спасибо, выручили в очередной раз.