Maçonnerie + Charger plus de fonctionnalités en utilisant Jquery

Question

J'ai besoin d'une aide sérieuse ici. J'ai créé une page avec une disposition de maçonnerie, et j'ai besoin d'ajouter un chargement plus d'effet. Voir la structure ci-dessous:

<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> 

Une fois que la page est la charge, seuls les 3 premiers articles montreront d'abord. Puis montrera les 3 autres éléments lorsque je clique sur le bouton "Plus de contenu".

Ceci est mon code de maçonnerie:

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

Dans l'attente de votre aide. Nous vous remercions à l'avance :)

Answer 1

Essayez cette Lord Plus fonction utilisée comme AJAX comme ça ...

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');); 
     } 
    }); 
});