New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maintain left-to-right order #873

Closed
desandro opened this Issue Jul 6, 2016 · 13 comments

Comments

10 participants
@desandro
Copy link
Owner

desandro commented Jul 6, 2016

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.

masonry-ltr

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

@egucciar

This comment has been minimized.

Copy link

egucciar commented Jul 13, 2016

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.

@clinto69

This comment has been minimized.

Copy link

clinto69 commented Aug 4, 2016

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

@Shakhmurat

This comment has been minimized.

Copy link

Shakhmurat commented Aug 8, 2016

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

@cavoirom

This comment has been minimized.

Copy link

cavoirom commented Aug 19, 2016

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.

masonry.ordered.js.zip

@jokke150

This comment has been minimized.

Copy link

jokke150 commented Aug 22, 2016

This would be really great.

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

Repository owner locked and limited conversation to collaborators Aug 22, 2016

@desandro

This comment has been minimized.

Copy link
Owner

desandro commented 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.

@desandro

This comment has been minimized.

Copy link
Owner

desandro commented Apr 24, 2017

Masonry v4.2.0 has added horizontalOrder. You can now maintain left-to-right with Masonry layouts.

Thanks all for your feedback over the years (!). Glad to have this feature finally delivered. Please open a new issue if you run into trouble. 馃寛馃惢

@desandro desandro closed this Apr 24, 2017

@jimmyadaro

This comment has been minimized.

Copy link

jimmyadaro commented Apr 24, 2017

Is this available for Isotope as well?

@desandro

This comment has been minimized.

@jimmyadaro

This comment has been minimized.

Copy link

jimmyadaro commented Apr 24, 2017

Amazing! Thank you very much.

@derek-knox

This comment has been minimized.

Copy link

derek-knox commented Apr 24, 2017

Right on! Nice work as always.

desandro added a commit to desandro/masonry-docs that referenced this issue May 4, 2017

@moequraishi

This comment has been minimized.

Copy link

moequraishi commented Mar 13, 2018

Hi,

It seems like the horizontalOrder does not work properly. It seems to break the layout of the columns if one of the columns is bigger than the rest....

@markmaurerrr

This comment has been minimized.

Copy link

markmaurerrr commented Mar 13, 2018

@javarch hahaha, nice one!

Repository owner locked and limited conversation to collaborators Mar 14, 2018

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