Masonry (Pinterest) style layout without absolute position (like Google+)

Question

I decided to use a card UI in a project and checked a few Masonry-like libraries, it seems that all of these use position: absolute for arranging elements.

IMO this method is not the right tool for some purposes, for example my cards are expand/collapsible (like Google plus post comments) and although this can be animated in Masonry, it causes complete rearrangement in elements (it doesn't simply push elements down, elements jump from column to column).

I took a look at G+'s markup, they dynamically insert 1, 2 or 3 DIV s as columns depending on screen width (for responsiveness) then fill this columns with elements. In this way elements have their normal position and behavior, so if you need to add, remove or expand/collapse just insert the element into the DOM or change the height and browser does the positioning.

They also take care of overall height, so in the next Ajax loading, it calculates and distributes elements in columns in a way that columns height grow at nearly same total height (just like Masonry)

Do they use any specific library?

Is there any responsive framework/library that work in similar way?

Answer 1

I had the exact same problem and I think Salvattore is exactly what you are looking for. It automatically creates some columns and puts all your grid elements into the right column. The styling is then totally up to you, so no need for any position:absolute .

In fact thats all the styling you need:

.size-1of3 {
    width: 33.333%;
}

Check it out: http://salvattore.com