Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Masonry item order

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
    });
});
like image 364
Merrill Mayer Avatar asked Jul 13 '12 00:07

Merrill Mayer


3 Answers

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/

like image 147
Jon Jaques Avatar answered Nov 06 '22 05:11

Jon Jaques


Latest masonry support the order with horizontalOrder: true settings.

like image 43
IqbalBary Avatar answered Nov 06 '22 03:11

IqbalBary


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

1, 2, 3
4, 5, 6
7, 8, 9
like image 2
onemanstartup Avatar answered Nov 06 '22 05:11

onemanstartup