Best jQuery Layout Plugins & Tutorials with Demo
Today we want to show you how to create a horizontal layout in jQuery and CSS3 with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.
ShapeShift is a jQuery plugin which helps you to create a dynamic grid system with awesome multi-column drag and drop functionality.This jQuery plugin will dynamically arrange a collection of elements into a grid in their parent container.Inspired heavily by the jQuery Masonry plugin.
Another great feature is masonry installed so that when resizing ,the grid to accomodate for more or less space is automatically turned on in this jquery plugin, so if your parent container has a 100% grid resizing the window will shapeshift the child objects around to accomodate for the new layout.
Metro Gallery a flexible and easy to integrate photo gallery featured in Metro Design. It allows you to build your unique photo wall with your custom settings.
- Unique Metro design
- Mobile device ready (phones + tablets)
- 21 different tile sizes
- CSS3 animations + jQuery fallback for IE
- Dynamic layout
- 9 pre-defined themes
- 3 loading animations
- Black & White mode
- Fully customizable
Use jQuery to create iOS-like App Folders on any website. They can contain any content and be styled in any way.
- Works great on mobiles
- Responsive design
- Fully styleable (it’s easy!)
- Very easy to use
- Can contain any content (images, text, video, complex layouts)
- Opened Folder can be linked to from other pages
- Configurable position changes for nth folder
A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).
OpenPanel is a jQuery plugin that allows you to open panel at any where in your page, unlimited panels as you want and support for responsive design. With this small plugin you can open more space for your site to add anything you want.
- Open Panels Anywhere in Your Sites.
- Unlimited Panels
- Support Responsive Design.
- Inline Content for SEO Purpose.
- Support Ajax Content.
- Four Directions Slide and Fade Effects.
Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space.
I created a jQuery plugin. I named it Grid-A-Licious and described it as, “Divs are placed in chronological order with a special grid” because I had no clue how to explain it better.Today this floating grid layout effect is heavily used around the net and there are tons of different variations of the script to download and use. Some more popular than the other, but all does a better job than Grid-A-Licious.