Home » Featured » jQuery plugins for creating dynamic layouts

jQuery plugins for creating dynamic layouts

aq1

Over the last couple of years, with the advancements in web technologies, we have seen a rapid rise in the number of sites that have broken away from using typical and boring layouts. No longer is choosing the number of columns your only option. Nowadays you can easily have a layout that cleverly and seamlessly arranges content into a grid (masonry), or a parallax scrolling layout, or even a layout that allows you to define a custom path for users as they scroll through pages.

jQuery Scroll Path

aq2

jQuery Scroll Path is a plugin that, as its name states, lets you define your own custom scroll path. The plugin uses canvas for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Scrolling with Scroll Path can be done with either the mouse-wheel, up & down arrow keys or the spacebar. It also allows for full page rotation, using CSS transforms.

Download

fullContent.js

aq3

Setting it to scroll either vertically or horizontally, fullContent.js will dynamically position a container within the width and height of the browser window, and will smoothly scroll between each container. It is an easy to configure plugin that gives you a nice presentation style layout.

Download

PageSlide

aq4

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane, that usually contains secondary navigation, a form, or any additional information.

Download

Packery

aq5

Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Download

gridster.js

aq6

Similiar to Shapeshift (above), Gridster is a plugin that allow you to build intuitive draggable layouts from elements spanning multiple columns. You can also dynamically add and remove elements from the grid.

Download

Freetile.js

aq7

Freetile is a plugin for organizing your content in an efficient, dynamic and responsive manner. It can be applied to any container element and will attempt to arrange it’s children in a layout that makes optimal use of the current screen space, by “packing” them in a tight arrangement.

Download

jQuery Masonry

aq8

And, of course we finally come to the plugin that has inspired many of the plugins on this page: jQuery Masonry. Developed by David DeSandro, the very popular Masonry is a dynamic grid layout plugin that will arrange elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Download

Columnizer

aq9

Columnizer is an easy to use plugin that will automatically layout your content in newspaper-style column format. You can specify either column width or a static number of columns.

Download

Stalactite

aq10

Stalactite is a plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, Stalactite takes a lazy approach and sorts each child element sequentially.

Download

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top