Pergunta

I've had a look around SO but couldn't find anything close to what I want (still learning).

Scenario

I'm using http://isotope.metafizzy.co/ to filter rss data.

I am pulling 6 different rss feeds with 10 posts each, which amounts to 60 in total.

I have a 6 filters (combinational type) for each set of feeds, meaning I can choose to filter more than one at a time.

Because of the amount of data I have, I only want to display the first 15 of the latest on the page.

As I understand it, Isotope needs to see the whole data before it can filter properly.

So, the question is how can I only display 15, no matter how many combination of filters I choose?

I can't use ':nth-child(-n+15)', as that only picks out what is laid out in the DOM, not the positioned elements. Any pointers?

pseudocode:

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

  }, function displayOnly15($elem) {

    //how do I display only 15?

  })
});

Am I missing an important step/process before or after?

Figured out that I could do something like:

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

Then use something like:

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

But calling:

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

...after, refreshes the layout twice in quick succession.

Help!

Foi útil?

Solução

For that last bit of code, I think you want to use addItems (Found on this page):

Use it like this:

$container.isotope( 'addItems', elements )

It works like insert, but it doesn't lay the items out. So then this:

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

Will do the swap, and then do one layout.

In terms of only showing 15 items, you can always just hide() any extra items. Doing anything else would require custom javascript to create and/or swap the actual data.

If you go that direction, something a bit more heavy than Isotope and jQuery might be helpful (like angular, knockout, etc).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top