Skip to content

Instantly share code, notes, and snippets.

@FutureMedia

FutureMedia/load-more-masonry.js

Created April 18, 2016 17:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save FutureMedia/e3a4220b4ac623301be98ee36d062bf6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save FutureMedia/e3a4220b4ac623301be98ee36d062bf6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. FutureMedia created this gist Apr 18, 2016.
    45 changes: 45 additions & 0 deletions load-more-masonry.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    /*
    * Load More for Masonry modification
    *
    * Full post:
    * http://www.billerickson.net/infinite-scroll-in-wordpress/
    *
    */

    jQuery(function($){

    $('.post-listing').append( '<span class="load-more">Click here to load earlier stories</span>' );
    var button = $('.post-listing .load-more');
    var page = 2;
    var loading = false;

    $('body').on('click', '.load-more', function(){
    if( ! loading ) {
    loading = true;
    var data = {
    action: 'be_ajax_load_more',
    nonce: beloadmore.nonce,
    page: page,
    query: beloadmore.query,
    };
    $.post(beloadmore.url, data, function(res) {
    if( res.success) {
    var $items = res.data;
    var $grid = $( '.post-listing' );
    $grid.append( $items ).each( function() {
    $grid.masonry( 'reloadItems' );
    });
    $grid.masonry( 'layout' );
    // $('.grid-item').animate({ opacity: 1 }); // you may need this
    page = page + 1;
    loading = false;
    } else {
    // console.log(res);
    }
    }).fail(function(xhr, textStatus, e) {
    // console.log(xhr.responseText);
    });
    }
    });

    });