Показать сообщение отдельно
  #1 (permalink)  
Старый 10.03.2018, 12:18
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});


	
});

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