Integrating Views Infinite Scroll with Masonry

In this blog post, I am going to extend upon my last module overview of Masonry, which is a Views plugin that utilizes the jQuery Masonry plugin. (Short recap, Masonry sets your elements into a responsive grid that aligns the elements in a brick fashion based on height, compared to the standard float technique.)  

If you read the original jQuery Masonry site, you can see that there's a portion that talks about integrating infinite scrolling. For those of you who are not familiar with infinite scrolling, it is the method where if you are reading a river of posts or content and you scroll to the bottom, more content will automatically load in without using the pager or navigating to a new page. This is great for sites that publish a lot of content or act as news aggregators so the user doesn't have to page through to read the newest content. There are some drawbacks to using infinite scroll, but we'll get to that in a minute.

I'm crazy. I haven't even said anything about Drupal yet, so let's do that. How do we implement infinite scrolling on our site? I'm glad you asked. There is a nifty little module called, go figure, Views Infinite Scroll. Nicely worded, module maintainers. Here are some things you'll need for this overview:

• Views
• Masonry
• Views Infinite Scrolling
• Devel (optional - used to create dummy content)
• Responsive theme, such as ZURB Foundations 
• Patches from the issue queue, I'll talk more about this - Support Masonry module

Install the module (Drupal module installer, FTP, drush, or drop it in your local environment) and enable it. Create your basic view of whatever content type you would like or use Devel to create some content), and set the format to Masonry with the default settings. To enable infinite scrolling, go down to the pager options in the middle column of the Views UI. Select "Infinite Scroll" and configure the options however you would like and save the view.

If you aren't using Masonry and you scroll down to the bottom, you will see more content load into the view. If you are using Masonry, you might scroll to the bottom and notice a big dud as no more content loads. This is where the patches from the issue queue come in! BWPanda went ahead and compiled separate patches together (including his own) to be applied to both Views Infinite Scroll and Masonry. Download both of these and apply them using Git, git apply -v [patchname.patch], or manhandle them. After those are applied, feel free to clear cache just in case. Reload the view and scroll down, now more masonry blocks load into the view via Infinite Scroll. Below is a short overview of what it looks like before and after the patches when trying to integrate Views Infinite Scroll with Masonry.

[[{"type":"media","view_mode":"media_large","fid":"31268","attributes":{"alt":"","class":"media-image","height":"470","style":"display: block; margin-left: auto; margin-right: auto;","typeof":"foaf:Image","width":"627"}}]]

Infinite Scroll is awesome to be used on blogs, loading in additional content without having to use a pager, and basically pleasing the average, lazy news reader. But is it always necessary? There are instances when you wouldn't want to use infinite scroll. What if the view contains a lot of content, and you have information or navigation options in the footer you want the reader to see? Well, they'll never reach it, like a pug running after a hotdog on a treadmill. So close, yet so far. Patricio Robles made a list of pros and cons of Infinite Scroll in his recent blog post. 

What are your thoughts on using Infinite Scroll, or its integration with Masonry? Let me know in the comments below!