EDIT: A pedido dos universitários, estou incluindo meus source-codes:
1 - MÉTODO JQUERY QUE FAZ O APPEND
function load_posts(offset, prime_random_key, prime_group_key) {
$.ajax({
type: 'POST',
url : 'http://localhost/app/controller/ajax/get_posts.php',
data: {
'url' : url,
'limit' : quant,
'offset' : offset,
'category_group': category_group,
'category' : category,
'modelstar' : modelstar,
'studio' : studio,
'collection': collection,
'order' : order,
'since' : since,
'user_email': user_email,
'id_post' : id_post,
'posts_grouped_by': posts_grouped_by,
'prime_random' : prime_random_key,
'prime_group' : prime_group_key,
'trash_display' : trash_display,
'sql_search' : sql_search
},
success: function(response) {
// alert(response);
$('#page').append(response);
flag += quant;
}
});
}
2 - QUANDO O MÉTODO É CHAMADO:
load_posts(0, prime_random, prime_group);
$(window).scroll(function(){
if($(window).scrollTop() >= $(document).height() - $(window).height()) {
load_posts(flag, prime_random, prime_group);
}
});
3 - RESPOSTA A REQUISIÇÃO AJAX QUE SERÁ APENDIDA NO BODY:
<div class="grid-item printed_album printed_album_<?= $col['id_post'] ?>" >
<!-- picture -->
<a class="pics" href="http://localhost/xsite/<?= $path ?>/<?= $col[$field] ?><?php if($post_head){echo('/'.str_replace(' ', '-', strtolower($col['head'])));} ?>">
<img src="http://localhost/app/content/pic/<?= $col['dir'] ?>/<?= $col['file'] ?>.jpg"/>
</a>
</div>
4 - DIV QUE RECEBERÁ O APPEND
<section id="page" class="grid" >
</section>
5 - CSS
section {
column-count: 6;
padding-top: 6px;
padding-bottom: 6px;
margin-left: auto;
margin-right: auto;
}
section .pics {
display: block;
margin-top: 4px;
margin-left: 1px;
}
6 - MASONRY GRID QUE EU PEGUEI DO SITE E NÃO FUNCIONOU:
<script src="/path/to/masonry.pkgd.min.js"></script>
<script>
$('.grid').masonry({
itemSelector: '.grid-item'
});
</script>