Group items by color, randomize groups on load

[superfein]

I'm wondering if this library has the ability to group items (images) by color using data attributes, and then randomize those color groups on page load, so that each time the page is refreshed, the images grouped by color also are fresh. So the first time the page loads the images with data attributes of "blue" will show up at the top of the image grid, and then next time the page loads "red" images will be at the top. There would be several colors.

With Isotope I can group by color and randomize the images on page load, but the randomization only occurs within the color groups, not the entire group itself.

Not interested in the dragging functionality.

I will also want to filter by color using a button filter system, which can filter the images or the group, whichever works.

Interested to hear if this library has this somewhat unique capability. Or if anyone knows of another library that can do this?

Thanks!

[niklasramo]

@superfein Yep, all of this should be doable with Muuri. I suggest you start by reading the docs here: https://github.com/haltu/muuri#grid-method-sort.

You can do pretty much any kind of sorting with by providing a pre-sorted array of items to the sort method, like this:

// Step 1: Get current items.
const currentItems = grid.getItems();

// Step 2: Sort currentItems as you wish.
// e.g. -> currentItems.reverse()

// Step 3: Provide the sorted array of items to the sort method.
grid.sort(currentItems);

Hope this helps :)