Question

我已经看了一眼，但找不到任何接近我想要的东西（仍然在学习）。

方案

我正在使用http://isotope.metafizzy.co/来过滤rss数据。

我正在提取6个不同的RSS源，每个帖子有10个帖子，共计60个。

我为每组Feed提供了6个过滤器（组合类型），这意味着我可以选择一次过滤多个过滤器。

由于我拥有的数据量，我只想在页面上显示最新的15个。

据我了解，Isotope需要先查看整个数据才能正确过滤。

所以，问题是我怎样才能显示15，无论我选择多少种过滤器组合？

我不能使用'：nth-child（-n + 15）'，因为它只能找出DOM中的布局，而不是定位的元素。有什么指针吗？

伪代码：

$container.imagesLoaded(function(){
  $container.isotope({
    filter : comboFilter,
    itemSelector : '.element',

  }, function displayOnly15($elem) {

    //how do I display only 15?

  })
});

我错过了之前或之后的重要步骤/过程吗？

想出我可以做的事情：

var $filtered = $container.data('isotope').$filteredAtoms;

然后使用类似的东西：

$keep = $filtered.slice(0,14);
$remove = $filtered.filter(function(i){
    return i > 14;
});

但是打电话：

$container
          .isotope( 'insert', $keep)
          .isotope( 'remove', $remove );

...之后，快速连续刷新两次布局。

帮助！

Answer 1

对于最后一段代码，我想你想使用addItems（Found on this page）：

像这样使用：

$container.isotope( 'addItems', elements )

它的作用类似于插入，但它不会将物品放出。那么这就是：

$container
      .isotope( 'addItems', $keep)
      .isotope( 'remove', $remove );

将进行交换，然后进行一次布局。

仅显示15个项目，您可以随时hide()任何额外的项目。做其他事情需要自定义javascript来创建和/或交换实际数据。

如果你朝着那个方向前进，那么比Isotope和jQuery更重的东西可能会有所帮助（比如棱角分明，淘汰赛等）。

如何限制同位素的过滤结果？

1 个答案: