CODEWITHSUNDEEP
jqueryjquery-masonry
Merrill Mayer
Merrill Mayer

Reputation: 113

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

Upvotes: 10

Views: 25676

Answers (3)

IqbalBary
IqbalBary

Reputation: 1126

Latest masonry support the order with horizontalOrder: true settings.

Upvotes: 3

Jon Jaques
Jon Jaques

Reputation: 4400

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/

Upvotes: 9

onemanstartup
onemanstartup

Reputation: 355

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

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

Upvotes: 2

Related Questions