Здравствуйте!
Сайт на 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(); // если мы дошли до последней страницы постов, скроем кнопку
}
}
});
});
});
Эта штука тоже, вроде как, работает... Но только новые блоки периодически налазят на старые и в конце получается уже совсем не красиво. Вероятно нужно добавить какие-то дополнительные параметры для правильного вычисления.. Помогите пожалуйста.
