Add an option to not always choose the shortest column.

[dwilmer]

[@desandro edit: added text from #810 below]

This is a feature request to change the positioning algorithm. Currently, the algorithm works as follows:

1. select the height of the shortest column
2. Select the leftmost (or rightmost) column of the columns with that height.

I would like to propose another algorithm:

1. Select the height of the shortest column
2. Select the leftmost (or rightmost) column of the columns with height <= (min_height + e), where e is a small value which the user can set, for example three pixels.

An example where this use case would be nice, can be seen here: http://codepen.io/anon/pen/JGLQVp
In this example, the slightly larger box on the left causes the box on the next line to be positioned in the middle column, while a position in the left column would be more visually pleasing — especially since the small height difference between the columns is not noticeable, due to the gutters and margin.

---

As explained in issue #810 , I would like to see an element positioned in a column that is slightly longer than the shortest column, if that is more to the left.

I wrote an implementation in this pull request. It adds the option maxColumnHeightDifference. If this option is set and greater than zero, the first column with minimum height + this difference is chosen instead of the column with the minimum height.

Any feedback is welcome :)

[desandro]

Wow, thanks so much for this contribution. This is a great feature as it resolves a pain point users have voiced: Masonry breaking horizontal order when there's a difference of 1 or 2 pixels. And it doesn't change the algorithm all that much, only looks out for the edge case.

I'd like to keep this PR open for a while to see other's interest in the feature. It's good, but I'm hesitant with changing Masonry base algorithm that's been in use for years.

Thanks again!

---

+1 or add 👍 reaction for this issue if you'd like to see this feature merged into Masonry.

[anthonyjburch]

I looked for a long time how to solve this problem before it dawned on me to look at the pull requests. So glad I finally found it! I did find that it breaks things slightly however without changing line 129 to

var setHeight = colGroup[shortColIndex] + item.size.outerHeight;

[rosieleung]

In case anyone else stumbles on this trying to implement something similar, here's an example with updated code for masonry-layout 4.2.2: https://codepen.io/rosieleung/pen/bGKMZoy