我正在使用同位素插件。我有一个空容器，我要在$(document).ready(...上添加项目@
所有这些项目都已正确添加，同位素的布局和链接过滤工作正常。
但是，我希望能够在将某个项目类附加到容器之后直接对它们应用过滤器，或者在插入过程中更好。
怎么做？
要恢复，我有一个“.home”过滤器，我希望在所有项目都附加到容器后应用它，而不是需要单击“home”过滤器。
【问题讨论】：
标签： jquery filter jquery-isotope
如果你有一些简单的东西
<ul id="filters">
<li><a href="#" data-filter=".home">Show all</a></li>
<li><a href="#" data-filter=".what">What?</a></li>
<li><a href="#" data-filter=".when">When?</a></li>
<li><a href="#" data-filter=".why">Why?</a></li>
// and so forth...
</ul>
在 DOM 完全构建后，您可以运行一个函数来预设过滤
$(function() {
// Isotope stuff...
$container.isotope({filter: '.home'});
// more Isotope stuff...
});
并且同位素已被初始化。请参阅this modified DeSandro fiddle，其中过滤了初始视图以仅显示红色元素。
更新 将初始内容加载到一个空的#container（通过Ajax？），您可以使用insert method 或隐藏#container，直到所有元素都被加载和排序。关于 Ajax 和成功时初始化 Isotope，另请参阅 this SO answer here。
【讨论】：
您可以使用同位素初始选项。
请检查这个codepen，它基于“Combination filters”的官方示例。
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.color-shape',
filter: '.initial-filter-class' //use this class with the items you want to load initially.
});
例如：
<div class="color-shape small round red initial-filter-class"></div>
【讨论】：
我参加聚会有点晚了，但我昨天和 Isotope 一起工作时遇到了同样的问题，最终以不同的方式解决了它。
假设我有一组过滤器按钮，很像 Systembolaget 的：
<div id="filters">
<button data-filter="*">Show all</button>
<button data-filter=".hidden">Archived</button>
<button data-filter="*:not(.hidden)">Current</button>
</div>
也许我只想在用户完成加载页面时显示“当前”过滤器。我为与我想要的过滤器匹配的 CSS 选择器设置了一个变量。我们稍后会使用这个变量。
var $grid;
var filterValue = "*:not(.hidden)";
接下来，我需要初始化我的内容。我已经准备好我的内容，所以我跳过了这一步，但如果你打算异步加载内容，你可以使用 JavaScript Promise。
这是我取自Google's Promise introduction article的一个例子：
var promise = new Promise(function(resolve, reject) {
var content = [];
// do a thing, possibly async, then…
if (content.length > 0) {
resolve(content);
}
else {
reject(Error("Nothing loaded"));
}
});
这是我用来设置同位素网格和事件监听器的函数：
function init() {
// Initialize isotope and the filter method we want to use
$grid = $('.grid').isotope({
itemSelector: '.grid-item',
filter: function() {
return filterValue ? $(this).is(filterValue) : true;
}
});
// Event listener for the filter buttons
$('#filters').on('click', 'button', function() {
filterValue = $(this).attr('data-filter');
$(this).addClass('active')
.siblings().removeClass('active');
// Refresh the isotope grid to display the filtered items
$grid.isotope();
});
}
一旦你定义了 Promise 应该做什么，你就可以初始化你的同位素网格。您需要将它嵌套在 then 方法中，以便它仅在 promise 成功解决后运行。这还允许您设置在内容加载步骤失败的情况下应该运行的任何后备。
promise.then(function(results) {
// Function defined in the last code snippet
return init();
}, function(err) {
// Error: "Nothing loaded"
console.log(err);
// If you have a banner hidden on the page, you can display it
$('.message').show();
});
如果您不需要使用承诺（如我的情况），那么您需要做的就是：
init();
【讨论】：