jQuery Masonry item order

Question

How can I get masonry to respect more of the original item order here? I would like the order to be dolphins, fish, invertebrates, pinnipeds:

var $container = jQuery('.tax-product_cat #content');
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector: 'li.product',
        gutterWidth: 22
    });
});

Answer 1

The masonry plugin doesn't provide much in the way or sorting options, as you can see in their API. The Isotope plugin by the same author however, does offer a plethora of sorting options.

http://isotope.metafizzy.co/

Just so you know, you can wrap all your jQuery code like this (function($){ //your code here })(jQuery);

var container = $('.tax-product_cat #content');

container.isotope({
  itemSelector : 'ul li',
  getSortData : {
    category : function (el) {
      // el refers to each item matching `itemSelector`
      return el.find('h3').text().trim();
    }
  },
  sortBy : 'category',
  sortAscending : true
});

Here's the sorting reference. http://isotope.metafizzy.co/docs/sorting.html Also the documentation specifies a few additional sortBy params:

• 'original-order' will use the original order of the item elements to arrange them in the layout.
• 'random' is a random order.

Here's a simple demo, showing everything to make it work. Try and grok what the code is doing and adjust your code to do the same. If it's not sorting them like you want, try and figure out what mode you need. See the getSortData object? category is something that you define. It's completely arbitrary. You can make a backwards category and just write the function to return the data the proper way.

http://jsfiddle.net/SRW6g/19/embedded/result/