Javascript Wordpress中带有同位素和过滤功能的无限滚动
我搜索了几乎每一个论坛,找到了几种方法,通过运行Wordpress的无限滚动过滤工作来制作一个布局。他们似乎都没有给我我想要的 此时,我已使用过滤功能使砖石布局正常工作。当我实现无限滚动时,它会在其他内容下面加载内容,这是同位素和无限滚动的一个常见问题。然而,当应用以将新加载的帖子排序到我的站点时,它会弄乱我的整个布局 我怀疑我没有在正确的位置进入附加行。这是我的js,没有Javascript Wordpress中带有同位素和过滤功能的无限滚动,javascript,wordpress,jquery-masonry,infinite-scroll,jquery-isotope,Javascript,Wordpress,Jquery Masonry,Infinite Scroll,Jquery Isotope,我搜索了几乎每一个论坛,找到了几种方法,通过运行Wordpress的无限滚动过滤工作来制作一个布局。他们似乎都没有给我我想要的 此时,我已使用过滤功能使砖石布局正常工作。当我实现无限滚动时,它会在其他内容下面加载内容,这是同位素和无限滚动的一个常见问题。然而,当应用以将新加载的帖子排序到我的站点时,它会弄乱我的整个布局 我怀疑我没有在正确的位置进入附加行。这是我的js,没有。append: $(function () { var $page = $('#page') }); $(fun
。append
:
$(function () {
var $page = $('#page')
});
$(function () {
var $container = $('#content'),
filters = {},
// get filter from hash, remove leading '#'
filterSelector = window.location.hash.slice(1);
$container.imagesLoaded(function () {
// bind isotope to window resize
$(window).smartresize(function () {
// jQuery has issues with percentage widths
// so we'll manually calulate it
var colW = Math.floor($container.width() * 0.49);
$container.isotope({
});
// trigger resize so isotope layout is triggered
}).smartresize();
});
$('#nav a').click(function () {
// store filter value in object
// i.e. filters.color = 'red'
var $this = $(this),
name = $this.attr('data-filter-name'),
value = $this.attr('data-filter-value'),
isoFilters = [],
filterName, prop;
filters[ name ] = value;
for (prop in filters) {
isoFilters.push(filters[ prop ]);
}
var filterSelector = isoFilters.join('');
// trigger isotope if its ready
if ($container.data('isotope')) {
$container.isotope({filter: filterSelector});
}
window.location.hash = filterSelector;
// toggle highlight
$this.parents('ul').find('.selected').removeClass('selected');
$this.parent().addClass('selected');
return false;
});
// if there was a filter, trigger a click on the
// corresponding option
if (filterSelector) {
var selectorClasses = filterSelector.split('.').slice(1);
$.each(selectorClasses, function (i, selectorClass) {
$('#nav a[data-filter-value=".' + selectorClass + '"]').click();
});
}
$container.isotope({
itemSelector: '.box',
filter: filterSelector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
#nav
是我的菜单,#content
是我的容器,.box
是我的帖子
有人能告诉我需要在哪里插入
.added
命令吗?added方法不适用于排序和筛选,请参阅文档;此外,出于某些原因,文档不鼓励使用带有过滤和排序的无限滚动;)请参阅作者关于将过滤/排序与无限滚动相结合的意见。他还建议在这种情况下使用插入法而不是附加法。