Responsive design: Option for left positioning to be output as a percentage?

[tbredin]

Firstly - I've used masonry quite a lot in the past - wonderful tool! Thanks heaps.

I have something of a feature request - in responsive design, the debounce on the resize event that positions the elements has always bugged me (or rather, more often than not, made our clients unhappy!).

However, in a fluid responsive grid we usually work in percentages. If there was an option to output masonry 'left' positions as percentages, this issue would almost completely disappear.

[desandro]

Great suggestion 🐬! I took a shot and put together this example. Try resizing window to see media query in effect.

http://codepen.io/desandro/pen/FlIpf

This adds a new option, percentPosition: true. It sets position of the column in percentage. To use the code, add the Outlayer.Item.prototype.layoutPosition code.

If others would like to see this feature merged into production, please +1

[elcontraption]

+1🍒

[tbredin]

Wow, you're fast! That looks awesome.

Big +1

[sawks]

+1 – thanks

[KyreenaH]

+1! Thanks!

[mmilo]

+1

[codapill]

+1 - awesome.

[nboliver]

+1 please!

[danielschmid]

+1 please!

[jakschu]

+1

[adrian-e]

+1 this looks awesome ! could it be implemented as an option in packery too ?

[cdohman]

+1

[perry]

+1

[ram-you]

+1

[Tuckie]

+1

[desandro]

Masonry v3.3.0 adds percentPosition option to position percent-width items fluidly. No more re-adjust transitions. 🎈 Demo: http://codepen.io/desandro/pen/JFpeg

Try it out! If you run into any problems, please open a new issue.