注意!
有一个待处理的 feature-request issue在 Isotope 的 GitHub 存储库上,如果您有兴趣查看官方文档和演示(如何结合 Isotope、Infinite Scroll、过滤和排序),您应该添加“👍” react 。它由 Isotope 的创建者打开以衡量兴趣。如果有兴趣,请点赞!
**TL;DR:为了帮助获得官方文档和演示,go here and add a "👍" reaction.**
尝试使用 Isotope JS plugin 拼凑出一个可过滤的布局和 Paul Irish 的(遗憾的是无人维护)Infinite Scroll plugin .
过滤有些工作。最初它过滤页面 1 的内容。为了过滤不在第 1 页上的项目,我需要向下滚动(我想这是将元素带到浏览器的内存中,从而使其可用于过滤脚本?)
通过一组初始页面内容的选择框(即:第 1 页上的内容)。
问题 1: 如何让过滤器适用于所有页面项目?即:如何引用过滤器脚本中的所有元素,甚至是那些尚未通过无限滚动进入页面的元素?
问题 2: 一旦我向下滚动并且所有元素都是可过滤的,窗口就不会在过滤时调整大小。所以当只有一个或两个元素通过过滤器显示时,仍然可以向下滚动页面(即使没有显示任何元素)。检查这些元素后,我发现它们仍在 DOM 中。
过滤脚本
function filterTags(){
isotopeInit();
var $checkboxes = $('#tag-wrap input')
$checkboxes.change(function(){
var arr = [];
$checkboxes.filter(':checked').each(function(){
var $dataToFilter = $(this).attr('data-filter');
arr.push( $dataToFilter );
});
arr = arr.join(', ');
$container.isotope({ filter: arr });
});
};
同位素初始化
function isotopeInit(){
var $container = $('.post-excerpts').imagesLoaded( function() {
$container.isotope({
itemSelector: '.post-excerpt-block-wrap',
layoutMode: 'masonry',
animationEngine: "best-available",
masonry: {
columnWidth: '.post-excerpt-block-wrap'
},
transitionDuration: '2.0',
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
});
});
};
无限滚动初始化
$container.infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<em>No more posts to load.</em>",
img: "http://www.infinite-scroll.com/loading.gif",
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
selector: '.infinite-loader',
speed: 'fast',
start: undefined
},
binder: $(window),
//pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
//bufferPx: Math.round($(window).height() * 0.9),
nextSelector: "a.older-posts",
navSelector: "nav.pagination",
contentSelector: ".content",
itemSelector: ".post-excerpt-block-wrap",
maxPage: {{pagination.pages}},
appendCallback: true
},
// Callback for initializing scripts to added post excerpts
function(newElements) {
var $newElems = $( newElements );
loadImages();
checkForFeatured();
makeFontResponsive();
addReadMoreLinks();
fitVidInit();
$newElems.imagesLoaded(function(){
$container.isotope( 'appended', $newElems );
});
}
);
我们非常欢迎任何想法、建议或其他见解。非常感谢。
##更新: 关于问题 2:问题似乎与告诉 Isotope 过滤项目的方式有关。具体来说,这段来自同位素初始化函数的代码:
transitionDuration: '2.0',
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
我已经尝试将其更改为以下内容,尽管这会完全从 DOM 中删除(修复间距问题)并且在“取消过滤”它们时它们不会返回到 DOM 中。所以这不是解决方案:
hiddenStyle: {
display: 'none'
},
visibleStyle: {
display: 'visible',
transform: 'scale(1)'
}
我也试过简单地完全删除这些配置行,这似乎是明显的“干净”解决方案,但这在过滤时仍然在页面上留下很多空白。不确定这里的问题是否与我的同位素或无限滚动实现有关。
最佳答案
对于问题 2,您可以做的一件事是在同位素过滤后将 display:none
样式应用于所有隐藏元素(并从所有可见元素中移除)。
我想你应该可以使用同位素的“on layoutComplete”事件监听器在合适的时候应用它,像这样:
$container.isotope( 'on', 'layoutComplete',
function( isoInstance, laidOutItems ) {
$('.my-elements-class.hiddenStyle').addClass('reallyHiddenStyle');
$('.my-elements-class.visibleStyle').removeClass('reallyHiddenStyle');
}
);
当然,您要过滤的元素属于 css 类 my-elements-class
,您将同位素过滤应用于 $container
并定义
reallyHiddenStyle: {
display: 'none'
}
在你的 CSS 中。
对于问题 1,也许您需要使用类似的无限滚动回调策略,在新元素因滚动而出现时将其添加到过滤器中。
您已经将回调作为 infinitescroll
方法的最后一个参数传递,所以快速看一下,这样的事情似乎可行:
$container.isotope('destroy');
$.each(newElements, function (i, el){/** add new elements to arr */});
$container.isotope({ filter: arr });
您有可以分享的工作示例吗?如果您愿意,我可以检查一下。
关于javascript - 使用 Infinite Scroll 进行 Isotope v2 过滤 - 过滤器未找到所有项目并且窗口未在过滤器上调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23895457/