4

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:

inserir a descrição da imagem aqui

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>
8
  • 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
    Commented 18/09/2018 às 20:27
  • Não consegui... Commented 23/09/2018 à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
    Commented 23/09/2018 à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... Commented 23/09/2018 à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
    Commented 24/09/2018 às 16:30

1 Resposta 1

0

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:

function scrollPage() {

     window.onscroll = function(e) {

                    var raw = this;

                    var supportPageOffset = window.pageXOffset !== undefined;
                    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

                   var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
                   var offsetHeight = window.pageYOffset;
                   var scrollHeight = document.documentElement.scrollHeight;

                    var dois_tercos = ((window.innerHeight / 3) * 2);

                    var soma = (scrollTop + window.innerHeight + dois_tercos);

                   if ((soma) >= scrollHeight) {
                       scrollPage();
                    }

    }
}

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.

Exemplo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .