jQuery Masonry is Bad Ass

jQuery Masonry is a sweet layout plugin for jQuery. They describe it as “The flip side of CSS floats”. It aligns elements vertically then horizontally, minimizing the vertical gaps between elements of varying heights. I created my own sandbox for playing around with masonry.

Like any layout, it has it’s time and place. I would consider this primarily an alternative layout, only to be used when trying to be a little different. In terms of usability, one is generally better off sticking to a grid.

If the content being displayed is meant to be “artsy”, such as a list of varying sized portfolio pieces or photos, then it is actually really useful and can give your site an “edgy” feel.

On my masonry sandbox page I am also playing around with some other ways to effect Drupal views. In the header of the view I have created buttons that correspond to toggling views field names. This can cause some overlap with the masonry layout that is applied that stacks content on top of other content. However, there is a simple fix; we just add masonry to the callback function of the slideToggle functions to re-mason the page only after the slideToggle has finished firing. The full JS for the page is below.