Best jQuery Layout Plugins & Tutorials with Demo

jQuery Responsive Tile Gallery

jQuery Responsive Tile Gallery

Responsive Tile Gallery is a completely responsive image gallery. It allows your visitors to easily sort and view all of your images. It also allows you to put your images into categories, load thumbnails instead of full resolution images, and develop a responsive websites for all platforms.

Features:

  • Fully responsive image gallery
  • Optional categories to let users sort through images
  • Optional lightbox for full resolution viewing
  • Optional Image captions
  • Option to use thumbnail images for faster load times
  • Uses CSS Transitions with jQuery fallbacks for improved performance
  • Cross-browser compatible (from IE7 and up)

Transformer layout : jQuery plugin support for CSS3 media queries

Transformer layout : jQuery plugin support for CSS3 media queries

Transformer layout jQuery plugin adds support for CSS3 media queries (min-width and max-width) across all browsers allowing you to develop layouts that adapt depending on the current window width, text size and zoom level without horizontal scrolling.

Each layout can then be liquid so as to always make the best use of space. This provides the benefits of both liquid and elastic layout approaches! That said, media queries can also be used to create fixed-width layouts that adapt for low resolutions.

Flex : A fluid asymmetrical jQuery Animated Grid plugin

Flex : A fluid asymmetrical jQuery Animated Grid plugin

A fluid asymmetrical animated grid plugin for jQuery.Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead me to a few plugins that were similar, but not the same. Saw one person say it was “quite impossible”, thought it would be a fun challenge.

jquery.vgrid : jQuery plugin variable grid layout

jquery.vgrid : jQuery plugin variable grid layout

I tried to introduce a variable grid layout using jquery.vgrid.js powered by jQuery.The simplest type from a sample of seven ul marked up with ” Variable grid layout. “I tried to arrange a thumbnail of the theme in the following pages.

Wookmark : jQuery Grid Layout plugin with Demo

Wookmark : jQuery Grid Layout plugin with Demo

Wookmark is a free jQuery plugin for creating dynamic and multi column layouts.

This jQuery plugin dynamically creates boxes with random heights, it detects the size of the window and automatically organizes the boxes into columns approximately of equal height.