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

I'm trying to learn how to code Tumblr themes (I don't have money for Wordpress), and I would like to figure out how to implement the "infinite / infinite scroll" (as opposed to pagination) messages; I would prefer not to use either of the two main endless scrolling scripts because infinite-scroll-js(by Paul Irish) is pretty well documented (I was able to run it), but I would like to have more control over the way messages are downloaded, so to speak, and Cody Sherman's endless scroll code not documented at all, and I have no idea how to use it (widely varying instructions are distributed by several non-coders, which are less familiar with Javascript than me, and what if I say something).

I do not know Ajax, but I am ready to read as much JS documentation as possible. Can I use the following sequence when adding messages from blue or do I need to understand Ajax like Paul Irish?

Onload: (body)

  • Get all .post elements (with children), remove them from the DOM, adding them to var, basically just a list (array? JS term?) Of messages

  • Download some calculated # messages (for this there would be an algorithm, probably based on the height of the column or something else, or perhaps dynamically measure them as they arrive) / add them to the Freemasonry container, animated when the user scrolls the bottom page, body or container of Freemasonry (not yet decided)

Is this believable or will I be wasting my time?

+4
2

, Ajax. , , JQuery Wordpress, . , . 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%"});
            });
        }
    }
});

JQuery Ajax https://api.jquery.com/jQuery.ajax/

+2

, jScroll - jQuery , . .

-2

Source: https://habr.com/ru/post/1525892/


All Articles