Only thing is I want the List items to stack nicely below each other no matter the height like the picture I attached. Is this possible?
The third way is to reorder your code and have columns rather than rows, but then you are relying far more heavily on manually setting up the page so that you have the right number and size of boxes in each column, which obviously is more work and is less robust if you want to edit the content.
PS - love your logo
Any posts I write in Arial are on my mobile phone, so please excuse typos etc. Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
Tried to implement the Vanilla Masonry on the page but did nothing. These are lists items and being pulled in through Facebook I can't really change them to divs but figured wouldnt really matter but still doesnt work, didn't do anything. I'd rather not make all the same height if don't need to, hopefully theres a way to make it work hoping I'm just missing something.
With the example you posted above is great but if the boxes have different heights smaller boxes will have a large white space after it which is why used the Masonry approach which works well but just need the items to fall in proper order.
Do you know of any jQuery plugins that can accomplish what I am going for?
I had to dig around a bit just to come up with the ones we've given you, and personally, I think they do what you need. Does it really matter what order they fall into? There may be a way to tweak the ordering in the JS, but it's not my area, I'm afraid.