JavaScript
Article

8 Stunning jQuery Page Layout Plugins

By Sam Deering
Have you ever considered using jQuery to help you with web page layouts?

Everything seems possible with jQuery now a day. In fact, I’ve listed here 8 of jQuery plugins that can help you layout your web page with ease. This is the best way to make professional web page layout especially if you are doing your website manually without help of any content management systems. The advantage of using this is that you can design your own web page layout with the help of your own idea or concepts.

Here is the list of 8 jQuery Page Layout Plugins:

1. jQSlickWrap

This is a cool jQuery plugin that can force text to wrap around an irregular shaped object such as splat, diagonal shapes, circles, etc.

LIVE DEMO:
http://jwf.us/projects/jQSlickWrap/example2.html

2. js-Columns


LIVE DEMO:
http://kenneth.kufluk.com/google/js-columns/

3. Css-Template-Layout

A CSS Template Layout Module with the help of jQuery implementation.
This script is used to parse a given set of CSS rules and as well as displaying their contents as specification indicates.

LIVE DEMO:
http://a.deveria.com/csstpl/

4. Masonry

This plugin is considered as the flip side of CSS float. This will arrange element vertically then horizontally aligned to grid. The effect minimizes vertical gaps between elements of varying height.

LIVE DEMO:
http://desandro.com/demo/masonry/docs/

5. UI.Layout

This plugin can create any UI looks.

LIVE DEMO:
http://layout.jquery-dev.net/demos/example.html

6. MB.CONTAINER PLUS

This can enable your container to drag, resize, collapse and minimize.

LIVE DEMO:
http://pupunzi.com/#mb.components/mb.containerPlus/containerPlus.html

7. Columnizer

This plugin will automatically layout your content in newspaper column style. You can also set its width and number of columns.

LIVE DEMO:
http://welcome.totheinter.net/autocolumn/sample1.html

8. Equal Heights

This plugin loops trough the most top level of child nodes of an element and will set minimum height values to that of the tallest.

LIVE DEMO:
http://www.filamentgroup.com/examples/equalHeights/

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.