http://codepen.io/ryanreese09/pen/KwyBmg
Basically I want them lining up like a masonry.
In the first row, it should detect which element has the biggest height.
Then in the next row, it should find the element in the same position above it (e.g. if it’s looping through 5, it should look to 1) and then apply a negative top margin equal to 1s height - the height of the tallest box.)
Can anyone help?
Why don’t you use Masonry or are you looking for something more compact?
I’m only attempting to get the layout.
As I’m sure you know Paul, getting the masonry layout vertically (CSS only) is a snap. However, there is no layout method available to make items snug up if you do it horizontally. Look how 5 and 6 almost snug up to 1 and 2 in the codepen. Normally, 5/6 would be on hte same line not snugged up because that’s how inline-block/floats behave.
I’m trying to have a compact JS way to calculate the negative top margin needed from the previous row, and apply it.
This also allows me to lay out the source order how I wish (left to right) instead of up to down.
I attempted to do this in CSS but I failed. Never tried it so I thought I’d give it a try, but I seem to be in need of JS for this.
Yes it does, almost.
http://codepen.io/ryanreese09/pen/BymPOj
How can I get the order being displayed to be more…“correct”?
Edit-ignore the screenshot of this codepen - go into it to see it actually working.
I think that’s about as close as you can get because at some point it’s not going to match up. For example you could have 5 smaller items in one column and 2 large items in an adjacent column and that means there is no real left to right alignment order.
Yeah true. I wasn’t holding my breath.
I gave the guy in the CSS thread what I had so he can do what he wants with it. It “sort of” meets his requirements I guess.
Thanks Paul.
Isotope’s layout modes support doing things by rows, which may be a suitable replacement for Masonry.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.