Using jQuery Masonry for a creative Pinterest effect in Drupal

I know we're all guilty of doing this. We get on Pinterest, start pinning our favorite holiday cookie recipes and those "laugh awkwardly by myself" e-cards, then start thinking, “Geez, what a cool layout for all these pins! How can I make my Drupal 7 site do that?” Well by golly, now you can with the jQuery Masonry plugin.

Straight from the documentation, here’s a brief introduction to what Masonry is: “Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

So as they explain, it’s like stacking bricks. Make the window smaller, and Masonry will find a new spot for the elements. Now you’re probably wondering, is there a module for that? You betcha. It’s actually a Views plugin called Masonry, and it’s pretty easy to use. Below you’ll find a screencast I made using the Masonry plugin. It’s a quick overview of the installation and use of the module, but I’ll write a quick summary.

1. Added jQuery Masonry plugin to the libraries directory - check status report to confirm.
2. Installed/enabled necessary modules.
3. Chose responsive theme - Bootstrap as my weapon of choice
4. Made a demo content type, generated demo content with devel.
5. Created a View page based on the demo content type.
6. Set format to Masonry grid, left settings default - for transition effect, check Enable Animations and Make Grid Resizeable.
7. Shrink the window size and shazam! Watch the awesome masonry effect unfold... or re-stack.

Optional: Add some pretty little CSS to make those boxes pop!

 .masonry-item {
    background: rgb(122,188,255);
    border-radius: 5px;
    box-shadow: 0 1px 6px -1px #242424;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
 }
 .masonry-item:nth-child(2n) {
    background: rgb(205,235,142);
 }
 .masonry-item:nth-child(3n) {
    background: rgb(255,175,75);
 }

Modules used during the demonstration:

• Views
• Field Formatter
• Libraries
• Devel
• Masonry

Last week I wrote a blog post on ways to find popular content on your site through Drupal modules, and I think using Masonry with Radioactivity would add an extra level of awesome to your site.

What other kinds of content could you use Masonry on to add a neat effect? Leave your comments below.