Best jQuery Layout Plugins & Tutorials with Demo

Fallwall.js : jQuery Fall Styles like Pinterest

Fallwall.js : jQuery Fall Styles like Pinterest

Fallwall.js is a jQuery plugin to make Fall Styles like Pinterest.

Bricks.js : Javascript Masonry Layout Generator

Bricks.js : Javascript Masonry Layout Generator

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

Features:

  • No required HTML markup or CSS stylesheet
  • Minimal, powerful, and readable configuration
  • Optional resize handling
  • Optimized handling of dynamically added items

Vertical Layout with Navigation

Vertical Layout with Navigation

Vertically scrolling sections of content with a slick mobile hamburger navigation.

FinderJS : Browse Hierarchical Data in Columns

FinderJS : Browse Hierarchical Data in Columns

FinderJS is a small UI component that allows you to browse tree-like data in columns, similar to the file manager in OS X.

  • Data source: Array or Function (useful for asynchronous operations, e.g. calling an API).
  • Stlying: Use any CSS/framework of choice, or feel free to use the example CSS (which leverages Flexbox). You can also define how items are rendered and change default classnames.
  • Keyboard navigation: use arrows keys to navigate.
  • Events: several events are emitted to allow for custom behavior.
  • Module formats: Provided as an npm module (CommonJS), a jQuery plugin, and exported as the global finder.

Stacky : jQuery Plugin to Create Stackable Panels

Stacky : jQuery Plugin to Create Stackable Panels

Stacky makes it easy to create UIs with panels that open horizontally using jQuery.

Panels can be opened, closed, expanded and collapsed. A panel can be opened either next to a given panel or a the end, in regular mode (pushed next to a panel) or in floating mode (absolute position). Additionally, the open and close events can optionally call functions to, for instance, set or retrieve data to/from panels.

jQuery Enhanced Splitter

jQuery Enhanced Splitter

jQuery Enhanced Splitter is a plugin to generate sliding splitters on your page. Useful for separating content, emulating the look of frames, collapsable tool windows, and more. Completely customizable look and feel, and touchscreen friendly.

jQuery Layout Balancer

jQuery Layout Balancer

A small jquery plugin will ensure that you don’t have ’empty boxes’ in gallery views. It works well on text and image galleries.This javascript code stretches the primary element (the recently added item) to occupy multiple columns thereby keeping the items in alignment.

Packery : Bin-packing layout library

Packery : Bin-packing layout library

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills 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.

Gridstack.js : jQuery plugin for Widget Layout

Gridstack.js : jQuery plugin for Widget Layout

Gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts.It also works great with knockout.js

ungrid : Simplest Responsive CSS 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.