BlocksIt.js - Dynamic Grid Layout jQuery Plugin. Look Inside BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you. Also, you can even combine the ‘blocks‘ and make a huge block! How It Works BlocksIt.js will re-position the selected elements using CSS absolute position property. Start the new block from left to right, andPlace the new block under shortest block. How to use 1. It should works well with jQuery 1.7.1 (haven’t tested for lower version). 2.) 3.)
#Note: If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status. Yannis Chatzikonstantinou.
6 Amazing jQuery Plugins to design Pinterest like Dynamic Grid Layout. Web designers around the Globe were so mesmerized by Pinterest's Dynamic Grid layout that they have been working to develop the same since then. And today we have a couple of great jQuery plugins to easily design the same interface for our Web projects that Pinterest and many other websites have (Recently adopted by Digg too). So here are 6 Great and Simple jQuery Plugins to design the Dynamic Grid Layout for Pinterest like Website. 1. Masonry This is the most widely used dynamic grid layout plugin for jQuery. 2. Its an exquisite jQuery plugin for intelligent and dynamic layouts that can't be achieved with CSS alone. 3. BlocksIt.js is a jQuery plugin to create dynamic grid layout. 4.
Wookmark is a website to bookmark Images and videos, and has a Pinterest like interface. 5. If you are a Ruby Developer and wish to create the Pinterest style layout in a short period of time, then this layout is for you. 6. Flex is a fluid asymmetrical animated grid plugin for jQuery. jQuery plugin - Flex - Demo. Isotope. GBKS/Wookmark-jQuery. BlocksIt.js - Dynamic Grid Layout jQuery Plugin.