Estou desenvolvendo um site estilo Pinterest mas não estou conseguindo juntar essas duas funcionalidades.
Pra fazer o infinite scroll, usei o jQuery com AJAX pra puxar os posts do database e apendê-los no body. Basicamente, copiei essa fórmula aqui: https://www.youtube.com/watch?v=_D-CPBvqQaU
E pra fazer o mansory grid, estilizei o body com o column-count: 6. Basicamente, copiei essa ideia aqui: https://www.youtube.com/watch?v=jqx_gANtNhg
O problema é que usando a propriedade column-cont, os posts são carregados verticalmente até que toda a primeira coluna seja preenchida. E daí é preenchida a segunda et cetera...
Como o height da página vai sempre aumentando com o load das novas postagens, os posts se deslocam pra cima e pra esquerda para que as primeiras colunas sejam preenchidas, fazendo um efeito muito indesejável! Tipo assim:
Antes:
1,3,5
2,4,6
Depois:
1,4,7
2,5,8
3,6,9
E depois de novo:
1,5,9
2,6,10,
3,7,11,
4,8,12
Quando, na verdade, eu queria um efeito tipo assim:
Antes:
1,2,3
4,5,6
Depois
1,2,3
4,5,6
7,8,9
E depois de novo:
1,2,3
4,5,6
7,8,9
10,11,12
A solução pra isso eu encontrei nesse script aqui: https://masonry.desandro.com/ E é bem fácil de ser implementado:
<script src="/path/to/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
...
</div>
<script>
$('.grid').masonry({
itemSelector: '.grid-item'
});
</script>
Só que ele não funciona corretamente com o método append() do jQuery. Toda vez que um nova imagem é apendida, a imagem de maior tamanho dita o height da sua respectiva row fazendo com que as imagens ao lado de menor tamanho fique com um espaço vertical vago fora dela. Assim:
OBS: E esse efeito de carregar os posts horizontalmente também não pode ser feito através do flexbox, infelizmente. Porque se os posts tiverem alturas diferentes, vai recair no mesmo problema acima.
Bom, esse mesmo site acima oferece uma solução alternativa para o infinite scroll que provavelmente deve casar com o método masonry. Eis o link: https://infinite-scroll.com/
Só que eu não entendi, não consegui implementá-lo.
Enfim, sei que questões longas e desfocadas no stackoverflow são penalizadas, mas notem que no fundo minha questão é bem objetiva. Quero conciliar essas duas funcionalidades de forma bem simples e prática, mas não sei como fazer.
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>
align-items: stretch;
)