Infinite Scroll or pagination with Isotope filtering

[desandro]

I'm re-posting my comment from metafizzy/infinite-scroll#674 (comment)

---

Can you use Infinite Scroll with Isotope's filtering and sorting? Yes. The code would look something like:

// init Isotope
var $grid = $('.grid').isotope({
  // Isotope options
});

// init Infinite Scroll
$grid.infiniteScroll({
  // Infinite Scroll options
  // do not set append
  // do not set outlayer
});

// append items on load
$grid.on( 'load.infiniteScroll', function( event, response, path ) {
  var $items = $( response ).find('.grid-item');
  // append items after images loaded
  $items.imagesLoaded( function() {
    $grid.append( $items );
    $grid.isotope( 'insert', $items );
  });
});

Add a 👍 reaction to this issue if you would like to see this Infinite Scroll support Isotope filtering with docs and demos Do not add +1 comments — They will be deleted.

---

But I still feel the same: Infinite Scroll with Isotope's filtering and sorting is not a good user experience. I've discussed this elsewhere in #724.

Infinite Scroll and filtering/sorting have conflicting behaviors. Infinite Scroll adds more items in sequential order. Filtering removes items. Sorting re-arranges the order of item. This leads to several odd behaviors:

• If there is a filter applied, should Infinite Scroll keep adding items even though most added items may be hidden?
• When you add items via Infinite Scroll, should the sort order be used against all the items as a whole, or just the new set of items?
• After filtering, if there scroll area has decreased, should Infinite Scroll add more items?
• After filtering and infinite-scrolling more items, there might be only 20 items shown, but 200 items added to the Isotope instance. The user could be bombarded with way more items than they expected. What happens to their scroll position?

I could go on. My point is that just because even though you can use these features together, maybe you should not. Then again, #724 has gotten a lot of 👍 so maybe I should sit back and just let this ride.

[kaleidografik]

This would be really useful feature, IMO. We are using Isotope and Infinite load in conjunction, along with Isotope filtering, however we have an issue where Isotope will only filter the grid items currently loaded, when we actually need it to filter all elements form all pages. Have subscribed for updates.

[Mitaku716]

I agree, this feature would be immensely useful in my opinion

[igregson]

@desandro

Can you use Infinite Scroll with Isotope's filtering and sorting? Yes. The code would look something like [...]

Super-glad to hear that this is indeed possible, though the code example only addresses using Infinite Scroll with Isotope's layout (i.e. it doesn't address filtering with Isotope and Infinite Scroll).

Hopefully this will get enough 👍 to justify first-class docs and demos. In the meantime, could you provide at least some code/direction on how to filter when using Infinite Scroll?

[ieraora]

Hi @desandro, in this link https://codepen.io/ieraora/pen/Vxveya I add your code. I've items with filter (metal) only in second page https://s.codepen.io/ieraora/debug/jzjrag. So, as you will see, we have a blank page. How can I resolve this thing? Thank you so much.

[desandro]

@ieraora See Isotope + Infinite Scroll with jQuery demo on CodePen

[ieraora]

Sorry @desandro, but my problem isnt' to configure Isotope with Infinite Scroll, but to view images filtered when these are in the second or third page of Infinite scroll.

[desandro]

@ieraora See Isotope + Infinite Scroll, insert with jQuery demo on CodePen. This uses the technique in my original post.

[ieraora]

@desandro here I've modify your code, but I've the same problem

[desandro]

@ieraora I'd like to keep discussion of this thread to seeing interest in Isotope with Infinite Scroll, not support. Generally, I recommend not using both of these plugins together. I believe you're running into the exact issues I laid out in my original post. Sorry, I will not be able to provide a solution at this time.