Can I get an "infinite scroll" effect using only Masonry.js?

Question

I'm trying to learn to code Tumblr themes (I have no money for Wordpress), and I'd like to figure out how to implement "infinite/endless scroll" (as opposed to pagination) of posts; I'd rather not use either of the 2 main infinite scroll scripts because infinite-scroll-js (by Paul Irish) is fairly well-documented (I was able to get it working) but I would like more control over the way the posts are loaded, so to speak, and Cody Sherman's infinite scroll code is not documented at all, and I have no idea how it should be used (the widely varying instructions are distributed by several noncoders who less of a grasp on Javascript than I do, and that's saying something).

I don't know any Ajax, but I am willing to read as much JS documentation as needed. Could I possibly use the following sequence when adding posts out of the blue, or do I need to understand Ajax like Paul Irish?

Onload: (of body)

1. Get all of the .post elements (with children), remove them from the DOM whilst adding them to a var that's basically just a list (array? JS term?) of posts

2. Load some computed # of posts (there would be an algorithm for this, probably based off post height or something, or perhaps dynamically measuring them as they come)/add them to the Masonry container, animated, when the user scrolls to the bottom of either the page, body, or Masonry container (haven't decided which yet)

Is this plausible or would I be wasting my time?

Answer 1

Yes you need to use Ajax. Here's how I did it using JQuery and Masonry on Wordpress, it should be pretty similar on any other site though. I'm using the Masonry function Append to add the new pictures. You can see it in action in the gallery on jorarts.org

jQuery.ajax({
    type:"POST",
    url: "/wp-admin/admin-ajax.php",
    data: myData,
    success:function(response){
        jQuery("#LoadingImage").hide();

        if(response){
            var $newPics=jQuery(response).css({ opacity: 0 });;

            $newPics.imagesLoaded(function(){
                jQuery("#galleryPlaceholder").append($newPics).masonry( 'appended', $newPics, true );
                $newPics.animate({ opacity: 1 });
                jQuery("#galleryPlaceholder a").colorbox({rel:currCat, 
                    scalePhotos:true,
                    maxWidth:"90%",
                    maxHeight:"90%"});
            });
        }
    }
});

Here is the JQuery Ajax documentation https://api.jquery.com/jQuery.ajax/

Answer 2

On,jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Sounds like a different person to me!