Arrange HTML Elements according to the Grid: jQuery Masonry
Posted on January 1, 2010, under jQuery, 
Bookmark it
It’s well known that the CSS floating arranges the elements horizontally then vertically. JQuery Masonry, a layout plugin, is like a flip side of CSS Floats. It arranges elements vertically then horizontally according to the grid. Thus, the vertical gaps between elements of varying height are minimized, just like a mason fitting stones in a wall.
Features include:
- Multi-column width support
- Appending elements and Infinite Scroll support
- Proper fluid resizing support
- Less obtrusive layout. No inserting additional markup.
- Automatically binds event to window resizing
- Source: http://desandro.com/resources/jquery-masonry
- Examples: Basic | Tumblelog | Infinite Scroll
- License: Dual-licensed under GPL and MIT
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- January 1, 2010
- article by Gabriel C.
- 3 comments
Related Posts
-
Expose HTML Elements with Style: jQuery Highlighter Pluginat January 3, 2010
-
Flip HTML Elements like Cards: QuickFlip 2.0 jQuery Pluginat July 21, 2009
-
Carousel Examples: YUI Library, jQuery, MooTools & Prototypeat April 11, 2009
-
Beautifully Style your HTML Form Elements: Uniformat February 10, 2010
-
Grid Accordion with jQuery: Pack lot of text into a small placeat March 30, 2010
-
AJAX Form with CAPTCHA, Realtime Validation and PHP BackendPublished on 09.02.08, 537 replies.
-
Dynamic Dependant DropDown List: US States & CountiesPublished on 11.06.08, 83 replies.
-
An AJAX (jQuery) Username Availability Checker with PHP Back-endPublished on 12.05.08, 61 replies.
-
How to Implement a jQuery AJAX Login Form into a Modal BoxPublished on 04.24.09, 85 replies.
-
How to Add Multi-language Support to a PHP WebsitePublished on 07.23.09, 83 replies.
-
10 Mistakes Info-Marketers Need To Know And Avoid In Order To Succeedby Gabriel C. on February 3, 2012
-
In-Depth Instant CSS Documentation Search: InstaCSS
by Gabriel C. on December 2, 2011
-
Factors to Consider When Choosing a Font
by Gabriel C. on November 15, 2011
-
Bootstrap: Kick-start Development of Webapps and Sites
by Gabriel C. on November 8, 2011
This is a great application. But Gabriel you prommised me a database "updated version" laston February 5th, 2012 by Llewellyn
Also will not work in this example: www.google.com/?secondwebsite.com/site.phpon January 7th, 2012 by dewdwtf2
For people who seem to be receiving auto responder emails twice, the issue can beon December 30th, 2011 by Donina
That include_once 'languages/'.$lang_file; always generates a break line on top of HTML. How can i preventon December 8th, 2011 by M4x1m0v3r
- AJAX (20)
- Design (16)
- Flash (19)
- Freebies (10)
- General (17)
- Graphics (22)
- HTML & CSS (33)
- Frameworks (8)
- JavaScript (142)
- Frameworks (5)
- jQuery (74)
- MooTools (13)
- Photoshop (3)
- PHP (103)
- Reviews (5)
- Statistics (2)
- Web Tools (8)
- Wordpress (16)
- February 2012
- December 2011
- November 2011
- October 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- May 2008
Tag Cloud
- ajax form builder
- ajax login
- alphabetical
- array
- auto grow
- base
- calculate
- captcha
- chart
- charts
- countdown
- css framework
- delimiters
- documents
- dropdown
- extension
- extract
- filename
- fonts
- form
- gd library
- icon set
- iphone
- lightbox
- modal box
- mod_rewrite
- percent
- Photo Gallery
- picker
- random
- remove
- script.aculo.us
- search
- shopping cart
- skin form elements
- slider
- syntax highlighter
- tableless
- to-do
- validate
- web analytics
- web fetch
- WYSIWYG
- zoom
3 Replies to "Arrange HTML Elements according to the Grid: jQuery Masonry"
January 8, 2010 at 4:52 AM
ahhhh if only this worked with script.aculo.us too!
January 8, 2010 at 6:56 AM
You can use both JQuery and Script.aculo.us ;)
January 11, 2010 at 6:53 PM
can use query and script for applications programs