What is Masonry?
Masonry is a cascading grid layout library written in Javascript. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. If you have seen Tumblr, you already know what I’m talking about. Masonry was written by David DeSandro, who is a web designer at Twitter.
What is Isotope?
This another javascript layout library by the same David DeSandro who wrote Masonry. Isotope adds sorting and filtering of UI elements. It uses Masonry layouts in addition to other layouts.
I found both of them to be so amazing, I whipped up a few demos to see for myself!
Demo: Masonry with jQuery
In this demo, masonry layout is used. Go ahead and resize the browser window to see the elements in the window automatically changing the layout to fit the screen. Usage of this appropriately will make the design fluid and gracefully fit on screens of varying sizes, as is common these days.
Demo: Isotope with jQuery
In this demo, isotope is used with masonry layout. You can see client side filtering in action here. Go ahead and click on the various categories displayed on top. Notice when you resize the window here, it behaves different from the masonry demo above. This demo uses a fixed column masonry layout, meaning, the number of columns will remain the same, but each element gets resized to fit the screen.