php - Como implementar um mansory grid e Infinite scroll juntos? - Stack Overflow em Português
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:
Quando, na verdade, eu queria um efeito tipo assim:
A solução pra isso eu encontrei nesse script aqui: https://masonry.desandro.com/ E é bem fácil de ser implementado:
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) {
url : 'http://localhost/app/controller/ajax/get_posts.php',
'limit'     : quant,
'offset'    : offset,
'category_group': category_group,
'modelstar' : modelstar,
'studio'    : studio,
'order'     : order,
'since'     : since,
'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
$('#page').append(response);
flag += quant;
2 - QUANDO O MÉTODO É CHAMADO:
load_posts(0, prime_random, prime_group);
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'] ?>" >
<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"/>
4 - DIV QUE RECEBERÁ O APPEND
<section id="page" class="grid" >
section .pics {
6 - MASONRY GRID QUE EU PEGUEI DO SITE E NÃO FUNCIONOU:
editada 28/09/18 às 20:10
Não sei se vc vai poupar tempo ou não com isso, mas as vezes alguma dessas respostas pode te dar uma luz pt.stackoverflow.com/questions/317340/… veja o exemplo onde cito o Wes Boss. Aqui pode ter algo que te interesse tb: pt.stackoverflow.com/questions/316223/… mas as vezes é mais fácil aprender a API do Infinite-Scroll do que fazer na mão... mas as vezes esse conteúdo te serve. Boa sorte – hugocsl 18/09/18 às 20:27
Não consegui... – Jose Henrique 23/09/18 às 13:00
Vc esta usando algum outro framework no seu projeto, tipo bootstrap ou materialize ou algo do tipo? Ou fez o CSS todo na mão? – hugocsl 23/09/18 às 13:11
Não, fiz tudo na mão! Apenas recortei pequenas partes do Materialize, como as definições para inputs de checkbox e input radio. Tudo o mais foi na unha... – Jose Henrique 23/09/18 às 13:28
Coloque seu código, ele é importante para saber como resolver, apenas os links de vídeos que copiou não é o suficiente. Me parece que o primeiro problema é alguma configuração de direção do infinite scroll e o segundo problema acredito que possa ser resolvido com flexbox (align-items: stretch;) – Costamilam 24/09/18 às 16:30
Acho que para fazer isso, não necessita de um plugin, talvez um método que verifique sua página e faça o scroll, exemplo:
var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
var offsetHeight = window.pageYOffset;
var dois_tercos = ((window.innerHeight / 3) * 2);
var soma = (scrollTop + window.innerHeight + dois_tercos);
if ((soma) >= scrollHeight) {
Daí é só ir carregando o dado na query dentro de um container e chamar esta função no final da requisição... scrollPage();
Melhor do que ficar dando append no javascript, você faz direto na api... bem menos risco de quebrar na tela.
Daí é só fazer o grid usando CSS puro.
editada 30/08/19 às 11:47
respondida 30/08/19 às 11:31
Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag php javascript rolamento grid ou faça sua própria pergunta.