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
    });
});

Lilla

Can you checkout the demo I provided? If you're able to get it to work, can you accept my answer please? Thanks. – Moderation

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/

Moderation

you can change the sortAscending flag as necessary. – Moderation

var $container = jQuery('.tax-product_cat #content'); $container.imagesLoaded( function(){ $container.isotope({ itemSelector : 'li.product', getSortData : { category : function (el) { // el refers to each item matching itemSelector return el.find('h3').text().trim(); } }, sortBy : 'category', sortAscending : true, masonry: { columnWidth: 245, gutterWidth: 22 } }); – Lilla

In the above, the sort does not seem to have any effect. I get the same results as with masonry. – Lilla

Are you checking your dev console? I see a host of errors. Uncaught TypeError: Object #<Object> has no method 'addTest' jquery.isotope.min.js:11 Uncaught TypeError: Cannot read property 'prototype' of undefined cornforth.js:23 Uncaught TypeError: Object [object Object] has no method 'isotope' cornforth.js:5 – Moderation

Answer 2

Latest masonry support the order with horizontalOrder: true settings.

Jello

are you certain about that? i'm using version 9.2.0 and am experiencing the same issue as the poster. the order of the elements withing the masonary depend on the order which the images are loaded in. – Blackmore

Answer 3

There is plugin - "masonry-ordered" for jquery masonry to make sort behave like

1, 2, 3
4, 5, 6
7, 8, 9

Overjoy

Pity, that this plugin only works with version 2.0. For my needs I could downgrade to Masonry v2.x. Thanks! – Torey