Masonry + Load more functionality using Jquery

Question

I need a serious help here. I created a page with a masonry layout, and I need to add a load more effect. See the structure below:

<div id="main-container">
 <div class="item">Content Here... 1 </div>
 <div class="item">Content Here... 2 </div>
 <div class="item">Content Here... 3 </div>
 <div class="item">Content Here... 4 </div>
 <div class="item">Content Here... 5 </div>
 <div class="item">Content Here... 6 </div>
 <div class="item">Content Here... 7 </div>
 <div class="LoadMore">More Content</div>
</div>

Once the page is load, only the first 3 items will show first. Then will show the other 3 items when I click the "More Content" button.

This is my masonry code:

var $container = $('#main-container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector    : '.item',
    //isFitWidth        : true,
    gutter          : 20,
    columnWidth     : 355,
  });
});

Looking forward to your help. Thank you in Advance :)

in witch programing language ? – Mansukh Khandhar Nov 09 '15 at 10:07 — Mansukh Khandhar, Nov 09 '15 at 10:07

score 0 · Answer 1 · answered Nov 09 '15 at 10:14

Try this On Lord More function used AJAX as like this ...

jQuery.ajax({
    type: "POST",
    url: ajax_url, // ajax_url for WordPress and PHP used your php file.
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#main-container").append(el).masonry( 'reload' ););
        }
    });
});

Masonry + Load more functionality using Jquery

1 Answers1