Maintain left-to-right order #873

desandro opened this Issue Jul 6, 2016 · 6 comments


None yet

6 participants

desandro commented Jul 6, 2016 edited

Lots of people have requested this over time. I'd like to see how many are interested. Add a 👍 reaction to this issue if you would like to see this feature added to Masonry and Isotope. Subscribe to this issue using the button in the sidebar.

The Masonry layout algorithm works by looking at vertical space. However you may want keep the left-to-right order of the items.


In the past I've recommended Masonry Ordered, but it's now out of date and no longer compatible with current version of Masonry.


any ideas on how to implement. desperately need this feature as if the heights are not pixel-perfect our items keep swapping order and its disorienting. need this feature.

@desandro desandro referenced this issue in metafizzy/isotope Jul 25, 2016

Sort Order doesn't work properly #1136

clinto69 commented Aug 4, 2016

I'd pay you right now to have this ferature in. Im desperate!


oh yeah , it is very, very necessary option! I can not solve this problem for a week.

cavoirom commented Aug 19, 2016 edited

This is a dirty patch can temporary solve the issue:

Remove these lines of code:

var minimumY = Math.min.apply( Math, colGroup );
var shortColIndex = colGroup.indexOf( minimumY );

Add these line of code at the same position:

var shortColIndex = this.items.indexOf(item) % this.cols;
var minimumY = colGroup[shortColIndex];

The idea is place the item by the order in its list and don't care the height, you need to make sure all items have the same width.

Or you can load the attachment after Masonry, it will do the trick.

jokke150 commented Aug 22, 2016 edited

This would be really great.

As there seems to be a certain demand for this, will this feature be implemented in near future? :)

@desandro desandro locked and limited conversation to collaborators Aug 22, 2016

Thanks for all your input. I have been working on this feature. I have no current ETA. I'll follow up once a release is ready.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.