Question

我正在使用Isotope插件。我有一个空容器，我要在$(document).ready(...

上添加项目

所有这些项目都正确添加，同位素的布局和链接上的过滤工作正常。

但是，我希望能够在将某个项目类附加到容器后直接应用它们，或者甚至更好地在插入过程中对其进行应用。

怎么做？

要恢复，我有一个'.home'过滤器，我想在将所有项目附加到容器后应用，而不需要点击“主页”过滤器。

Answer 1

如果您有简单的事情

<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...
});

和Isotope已初始化。请参阅this modified DeSandro fiddle，其中过滤了初始视图以仅显示红色元素。

UPDATE 将初始内容加载到空的#container（通过Ajax？），您可以使用insert method或只是隐藏#container，直到所有元素都已加载和排序。关于Ajax和初始化Isotope的成功，请参阅this SO answer here。

Answer 2

您可以使用同位素初始选项。

请检查此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>

Answer 3

我参加聚会有点晚了，但是当我昨天与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();
  });
}

一旦定义了诺言应该做什么，就可以初始化同位素网格。您需要将其嵌套在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();

如何在使用Jquery Isotope插件动态插入项目后将默认过滤器应用于容器？

3 个答案: