jQuery Isotope - sort data by "group"

Question

Using the Isotope plugin, I am trying to achieve a sorting system where, by clicking an item, groups are formed by positioning items of the same type after the clicked item.

Isotope's sort/filter functions don't seem designed for this purpose, so my initial approach was to rearrange the DOM using .insertAfter and then firing 'reLayout'.

However, it seems that after initialization the DOM order isn't relevant and nothing short of destroying and re-initializing Isotope works, but that causes undesirable scroll position jumps.

(See: http://jsfiddle.net/owenhoskins/r7MgY/10896/)

Is there are way to update Isotope based on DOM structure without a re-init?

Or, is it conceivable to interface with the sort/filter functions to achieve this aim?

Thanks in advance, Owen

Answer 1

Try this instead (a forked fiddle) - Using the prepend method in the docs works for me, and doesn't jump.

Answer 2

Would you consider using a different plugin to accomplish this? Take a look at: Quick Sand Its funcionality consists in replacing a collections of elements with another, much more simple than isotope in my opinion.

Here's an example similar to the result you want to get: Quick sort example