Как правильно сделать Masonry с Ajax пагинацией?

Question

[Emmet1]

Задача: сделать вывод каталога на сайте в стиле Masonry (как пинтерест).
Для этого есть достаточно плагинов, но есть проблема: на сайта ajax пагинация.
Мне не удалось найти рабочий вариант плагина, который бы корректно работал при подгрузке нового контента каталога.

Может кто-то сталкивался с такой задачей?

Answer 1

[Алексей Скляров]

layout / .masonry(). При добавлении нового контента просто запускаете метод, который вам все разложит по полочкам снова.

Answer 2

[Антон Литвиненко]

На примере изотопа и кнопки загрузить еще

jQuery(function($){
	$('#true_loadmore').on('click', function(){
		var button = $(this);
		var data = {
			'action': 'loadmore',
			'query': loadmore_params.posts, // that's how we get params from wp_localize_script() function
			'page' : loadmore_params.current_page
		};
		$.ajax({
			url : loadmore_params.ajaxurl,
			data : data,
			type : 'POST',
			beforeSend : function (xhr) {
				button.text(loadmoreBtnLoading);
			},
			success : function(data){
				if( data ) { 
					var $container = $('.portfolio-wrap');
					var	$el = $(data);
					// imagesLoaded фиксит косяки изотопа
					$el.imagesLoaded(function() {
						$container.append($el).isotope('appended', $el, true);
					});

					button.text(loadmoreBtnShowMore);

					loadmore_params.current_page++;

					if ( loadmore_params.current_page == loadmore_params.max_pages ) {
						button.remove();
					}
					// you can also fire the "post-load" event here if you use a plugin that requires it
					// $( document.body ).trigger( 'post-load' );
				} else {
					button.remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});