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

Can you checkout the demo I provided? If you're able to get it to work, can you accept my answer please? Thanks. — Jon Jaques, Jul 16 '12 at 21:29

Jon Jaques · Accepted Answer · 2016-02-11T16:50:06.130

9

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/

edited Feb 11 '16 at 16:50

answered Jul 13 '12 at 01:15

Jon Jaques

3,766
1
20
24

you can change the ```sortAscending``` flag as necessary. – Jon Jaques Jul 13 '12 at 01:15
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 } }); – Merrill Mayer Jul 14 '12 at 01:29
In the above, the sort does not seem to have any effect. I get the same results as with masonry. – Merrill Mayer Jul 14 '12 at 01:33
Are you checking your dev console? I see a host of errors. Uncaught TypeError: Object # – Jon Jaques Jul 14 '12 at 02:19

score 3 · Answer 2 · answered Sep 24 '19 at 08:41

3

Latest masonry support the order with horizontalOrder: true settings.

answered Sep 24 '19 at 08:41

IqbalBary

918
1
9
16

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. – YoNuevo Aug 19 '20 at 15:01

score 2 · Answer 3 · answered Oct 29 '13 at 12:41

2

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

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

answered Oct 29 '13 at 12:41

onemanstartup

345
2
10

Pity, that this plugin only works with version 2.0. For my needs I could downgrade to Masonry v2.x. Thanks! – Ilia Rostovtsev Dec 10 '13 at 09:54

jQuery Masonry item order

3 Answers3