Skip to main content

8 Stunning jQuery Page Layout Plugins

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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/

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!