@Emmet1

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

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

Может кто-то сталкивался с такой задачей?
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 2
layout / .masonry(). При добавлении нового контента просто запускаете метод, который вам все разложит по полочкам снова.
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
На примере изотопа и кнопки загрузить еще
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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы