10 jQuery Plugins for Creating Dynamic Layouts

By Focusoncode September 10, 2018

Nowadays you can easily have a responsive and dynamic layout that cleverly and seamlessly arranges content into a grid, or a parallax scrolling design, or even a layout that allows you to define a custom path for users as they scroll through pages.
At first, a site with fancy animation effects may seem tricky to build. But that is not the case, as you will discover from the collection of jQuery plugins we have for you below.

Shapeshift v2.0 – Dynamically Arrange Elements

Inspired by the jQuery Masonry plugin, Shapeshift is a plugin that will dynamically arrange a collection of elements into a column grid system similar to Pinterest. It has the ability to drag and drop items within the grid while still maintaining a logical index position for each item.

fullContent.js

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.

 

Bricks.js 

Bricks.js is a blazing fast masonry layout generator for fixed width elements by using javascript.

jQuery PageSlide

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.

 

Stellar.js – Parallax Scrolling

Stellar.js is very easy to use a plugin that provides parallax scrolling effects to any scrolling element.

Packery

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.

 

 

Stalactite – Pack Content

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.

 

 

gridster.js – Draggable Layouts

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

ungrid: Simplest Responsive CSS Grid

ungrid is a tiny, responsive, table-based CSS grid system. The entire ungrid.css file is 97 bytes minified.

 

jsPanel 

A jQuery Plugin to generate configurable floating panels for use in a backend solution and other web applications.

Leave a Comment

Your email address will not be published.