我正在使用WookMark创建一个带有类别过滤器和ajax无限滚动的画廊。一切似乎都工作正常，但是当通过ajax加载新项目时，它们不会添加到过滤器中。
你可以在这里查看。
我的JS代码被给出
jQuery(document).ready(function($) {
// GET THE WINDOW WIDTH
function getWindowWidth() {
return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
// Initialize lightbox
$('#container').magnificPopup({
delegate: 'li:not(.inactive) a',
type: 'image',
gallery: {
enabled: true
}
});
// Instantiate wookmark after all images have been loaded
var wookmark,
container = '#container',
$container = $(container),
$window = $(window),
$document = $(document);
// init wookmark
imagesLoaded('#container', function() {
wookmark = new Wookmark('#container', {
itemWidth: 300, // Optional min width of a grid item
outerOffset: 0, // Optional the distance from grid to parent
flexibleWidth: function () {
// Return a maximum width depending on the viewport
return getWindowWidth() < 1024 ? '100%' : '50%';
}
});
});
// INFINITE SCROLL
// AJAX LOAD MORE
$('#main').append( '<span class="load-more"></span>' );
var button = $('#main .load-more');
var page = 2;
var loading = false;
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
// Load more items on scroll
$(window).scroll(function(){
if( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
var offset = $(button).offset().top - $(window).scrollTop();
if( 2000 > offset ) {
console.log('Added more items');
// Get Next Page Posts AJAX
loading = true;
var data = {
action: 'be_ajax_load_more',
nonce: beloadmore.nonce,
page: page,
query: beloadmore.query,
};
$.post(beloadmore.url, data, function(res) {
if( res.success) {
// Get the first then items from the grid, clone them, and add them to the bottom of the grid
var $items = $(res.data, $container);
$container.append($items);
wookmark.initItems();
wookmark.layout(true, function () {
// Fade in items after layout
setTimeout(function() {
$items.css('opacity', 1);
}, 300);
});
$('#main').append( button );
page = page + 1;
loading = false;
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
}
});
// Setup filter buttons when jQuery is available
var $filters = $('#filters li');
/**
* When a filter is clicked, toggle it's active state and refresh.
*/
var onClickFilter = function(event) {
updateFilterClasses();
var $item = $(event.currentTarget),
itemActive = $item.hasClass('active');
if (!itemActive) {
$filters.removeClass('active');
itemActive = true;
} else {
itemActive = false;
}
$item.toggleClass('active');
// Filter by the currently selected filter
wookmark.filter(itemActive ? [$item.data('filter')] : []);
}
// Capture filter click events.
$('#filters').on('click.wookmark-filter', 'li', onClickFilter);
});
好的，我在Wookmark文档中跟踪了解决方案..
当我通过 ajax 加载新项目时，我必须更新过滤器类。所以我只是在我的ajax成功中添加了wookmark.updateFilterClasses();。如果有人需要，下面是工作代码。
jQuery(document).ready(function($) {
function getWindowWidth() {
return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
// Init lightbox
$('#container').magnificPopup({
delegate: 'li:not(.inactive) a',
type: 'image',
gallery: {
enabled: true
}
});
// Instantiate wookmark after all images have been loaded
var wookmark,
container = '#container',
$container = $(container),
$window = $(window),
$document = $(document);
imagesLoaded('#container', function() {
wookmark = new Wookmark('#container', {
itemWidth: 300, // Optional min width of a grid item
outerOffset: 0, // Optional the distance from grid to parent
flexibleWidth: function () {
// Return a maximum width depending on the viewport
return getWindowWidth() < 1024 ? '100%' : '50%';
}
});
});
$('#main').append( '<span class="load-more"></span>' );
var button = $('#main .load-more');
var page = 2;
var loading = false;
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
$(window).scroll(function(){
if( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
var offset = $(button).offset().top - $(window).scrollTop();
if( 2000 > offset ) {
console.log('Added more items');
// Get Next Page Posts AJAX
loading = true;
var data = {
// Function which grabs next 10 posts available
action: 'be_ajax_load_more',
nonce: beloadmore.nonce,
page: page,
query: beloadmore.query,
};
$.post(beloadmore.url, data, function(res) {
if( res.success) {
// Get the first then items from the grid, clone them, and add them to the bottom of the grid
var $items = $(res.data, $container);
$container.append($items);
wookmark.initItems();
wookmark.updateFilterClasses();
wookmark.layout(true, function () {
// Fade in items after layout
setTimeout(function() {
$items.css('opacity', 1);
}, 300);
});
$('#main').append( button );
page = page + 1;
loading = false;
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
}
});
// Setup filter buttons when jQuery is available
var $filters = $('#filters li');
/**
* When a filter is clicked, toggle it's active state and refresh.
*/
var onClickFilter = function(event) {
var $item = $(event.currentTarget),
itemActive = $item.hasClass('active');
console.log(itemActive);
if (!itemActive) {
$filters.removeClass('active');
itemActive = true;
} else {
itemActive = false;
}
$item.toggleClass('active');
// Filter by the currently selected filter
wookmark.filter(itemActive ? [$item.data('filter')] : []);
}
// Capture filter click events.
$('#filters').on('click.wookmrk-filter', 'li', onClickFilter);
});