1
后同位素项目重定位问题我试图设置与同位素加载Ajax后。但是我无法在帖子中加载并在网格中显示它们。加载的网格项目要么添加到网格的顶部,要么未被同位素定位。追加
更新!我刚刚注意到,双击网格项目的位置正确。但为什么不在第一次点击?
<div id="filters" class="button-group"></div>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
同位素设置
// init Isotope
var $grid = $('.grid').isotope({
sortBy : 'random',
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
},
sortAscending: {
name: true,
number: false,
date: false,
},
getSortData: {
name: '.name',
date: '.date',
number : '.number',
category: '[data-category]',
}
});
负载posts.js
jQuery(document).ready(function($) {
var pageNum = parseInt(rvidee_alp.startPage) + 1; // The number of the next page to load (/page/x/).
var max = parseInt(rvidee_alp.maxPages); // The maximum number of pages the current query can return.
var nextLink = rvidee_alp.nextLink; // The link of the next page of posts.
var grid = $('.grid'); // Posts container
if(pageNum <= max) {
$('.posts') // Insert the "More Posts" link.
.append('<div class="col"><a id="load-posts" href="#0">Load more</a></div>');
$('.navigation').remove(); // Remove the traditional navigation.
}
$(document).on('click', '#load-posts', function(){
if(pageNum <= max) { // Are there more posts to load?
$(this).text('Loading posts...');
$.get(nextLink, function(data){
pageNum++;
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
$(data).find('.grid-item').appendTo(grid);
if(pageNum <= max) {
$('#load-posts').text('Load more');
} else {
$('#load-posts').text('No more to load.');
}
});
} else {
$('#load-posts').append('.');
}
$('.grid').isotope('reloadItems').isotope();
return false;
});
});
我想我会尝试让( '.grid项目')的数据到变量,所以我可以在$(网格)下调用它,但我无法让它工作。目前帖子被添加,但Isotope没有定位它们。
只要让我知道,如果你需要看到在functions.php中的设置。
更新!我刚刚注意到双击网格项目的位置正确。但为什么不在第一次点击?