02 Sep The 10 most Fascinating jQuery Grids
How do jQuery Grids work?
jQuery grids let you create Pinterest-like layouts for your site. They work like a virtual matrix, they follow the “box inside a box” principle. jQuery grids dynamically calculate what the best arrangement of items is and populate the page with them in a way that leaves the least blank space, something like what you see in these boxes here.
In this post you can read about the 10 most fascinating jQuery grids that are currently out on the market – of course, just like jQuery, all of them are open-source and free.
- jQuery Nested: jQuery Nestedprovides you with a handy multi-column grid layout that is responsive and works across all kinds of devices. This jQuery plugin advertises itself as completely gap-free. At first this slogan may sound like a cheap marketing trick but the plugin actually accomplishes gap-freedom very nicely, just as its creators promised. jQuery Nested follows a unique script in populating the grid matrix. First it creates a multi column grid, then it scans the matrix for gaps and fills them by reordering the different elements. Finally – and that is the step that makes this grid gapless – it resizes any element in the bottom row that doesn’t properly fit in the gap.
- ShapeShift: Shapeshiftis a really cool drag-and-drop jQuery grid system. The user can drag and drop an element throughout the page, and Shapeshift reorganizes the elements into a new position every time an item is moved around. The dragging event changes the index position of the elements within their parent container. This way Spaceshift doesn’t screw up the logical indexing system of the child elements. Seriously, try it out on their demo website, it works wonderfully. Shapeshift also works well on touch-enabled devices as it smartly utilizes the jQuery UI Touch Punch
- jQuery Portfolio: ThejQuery Portfolio plugin is a great choice if you want to design a stylish portfolio site. The author originally designed it for his own portfolio site but later made it an open-source project. You can set the number of columns in the grid and the desired jQuery transition effect. The jQuery Portfolio plugin is responsive as well so you don’t have to worry about the user experience of your visitors using a mobile device.
- jQuery MatchHeight: The jQuery MatchHeight plugin allows you to use a special jQuery grid that makes the height of all selected elements exactly equal. Match Height automatically matches the height of elements in the same group, and smartly handles floating elements and wrapping. You can use this plugin for placing items in lovely straight rows. You can either use a maximum height as a benchmark or define a specific target element and MatchHeight will make sure that other elements won’t be larger than that. It also has a Data API that enables you to use data attributes inside the inline <script> tags in your HTML 5 files.
- Photoset Grid: Do you like Tumblr’sPhotoset feature? Then the Photoset Grid jQuery plugin was designed for you. This handy frontend tool arranges images into a flexible grid based on the aforementioned photoset feature. The original version of the plugin was created for Tumblr themes but the dev team decided to give the opportunity for designers to use this plugin in their own designs. If you want to add Photoset Grid to your own Tumblr theme, they have a custom code snippet you can embed in your code. Probably the coolest feature of this plugin is the possibility of adding a Lightbox to the image grid.
- jQuery Gridly: jQuery Gridlyis a smart choice for anyone who wants toimplement grid-based layouts on touch-enabled devices. This plugin allows users to drag and drop items around the screen. Both the drag-and-drop and the resize features react to touchscreen gestures too. Users can close the images they don’t like and after an image is closed the layout is rearranged following by a cool effect. It’s easy to integrate jQuery Gridly with Ruby on Rails apps as it’s also registered as a Rails Asset.