Found a simple and superb plugin name as Infinite Scroll. It allows for the dynamic loading of post on a page as the visitor scrolls down the page. This has the advantage of loading an archives page or a taxonomy page much faster as the initial number of post loaded are smaller. As the page is scrolled down more post are shown by loading the content dynamically through Ajax calls.
After installing and activating the plugin, go to the setting page and make sure you identify the main container of your content where each post is listed.
Infinite Scroll and Masonry
Masonry is a jQuery plugin the automatically layout content blocks in a grid with best fit parameter for your screen. In order to get Inifinite scroll to play nicely with Masonry, we need to make use of the setting field that calls the Masonry function to reorder the new content below the page. Infinite scroll plugin gives a jQuery handle on the new content that has been loaded, $( newElements )
(function($) {
//let's hide new elements loaded
var $newElems = $( newElements ).css({ opacity: 0 });
//display new elements using masonry
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$('#grid-wrap').masonry( 'appended', $newElems );
});
})( jQuery );
we make sure to wrap the function in jQuery call in order to enable the use of the jQuery shorthand $ ….et voila!
Custom posts
For custom post it is relatively straightforward, the plugin only requires the CSS selectors on which to manage the loaded posts. In the settings page of your Dashboard, Settings->Infinite Scroll, you can add a list of Content selectors which are comma separated as well as item post selectors. Below is an example from a recent project, the blog page has a number of articles with class .post contained in a div with id #content.
Similarly, our custom post classed as .av_opportunity and .av_unit and are displayed in a container with id #opportunities.