Webmasters Gallery

jQuery Masonry is a layout plugin for jQuery. Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Masonry will work with all structural elements: div’s, lists, p’s, spans.

There are no setting or options within in the plugin. Instead, all spacing properties can be set with CSS. The only property required for Masonry to work is for the width of the child elements. Child elements should be should have equal width in order to avoid any overlapping.

Controlling layouts with CSS is a big subject these days as after dropping the table support, it is clear that the current capabilities of CSS is not enough to develop complex & flexible layouts with ease.

There is CSS Template Layout Module which offers exciting features but it is in a draft status.

Until we get those new features, there are various solutions that are developed with jQuery to manipulate page layouts for faster & cross-browser results.

Here is a collection of 6 jQuery plugins to manage page layouts easily:

jQuery Masonry

Masonry is like the flip side of CSS floats. Floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. And the result is no vertical gaps between elements of varying height.

The plugin is almost totally managed with CSS rules. It uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & paddings of elements.

UI.Layout

This is a plugin to create desktop-like layouts. It can b used to create any UI look from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms & more.

jLayout

The library provides three layout algorithms:

• border, which lays out components in five different regions
• grid, which lays out components in a user defined grid
• flex-grid which offers a grid with flexible column and row sizes.

css-template-layout

The plugin aims to offer a similar functionality with the CSS Template Layout Module (which is currently in a draft status).

The script simply parses the mentioned CSS rules & displays the content accordingly.

Columnizer

The plugin automatically converts any content into a newspaper-like column format.

A default clumn widt or a static number of columns can be defined & the rest is almost done by itself.

EqualHeights

Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.