Skip to main content
Bumped by Community user
Aviso removido Chamar atenção por ComunidadeBot
Fim da Recompensa sem resposta vencedora por ComunidadeBot
adicionou 2752 caracteres ao conteúdo
Fonte Link

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>

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>
Tweeted twitter.com/StackOverflowPT/status/1044648304112521216
Aviso adicionado Chamar atenção por Jose Henrique
Recompensa Oferecida vale 50 pontos de reputação por Jose Henrique
removeu 15 caracteres do conteúdo
Fonte Link

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

Esse efeito de carregar os posts horizontalmente pode ser feito com as do flexbox, certo? Errado! Errado se os posts tiverem alturas diferentes, e os meus tem, porque são imagens com o mesmo width mas de height variado.

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.

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

Esse efeito de carregar os posts horizontalmente pode ser feito com as do flexbox, certo? Errado! Errado se os posts tiverem alturas diferentes, e os meus tem, porque são imagens com o mesmo width mas de height variado.

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

Bom, esse mesmo site 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.

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.

Fonte Link

Como implementar um mansory grid e Infinite scroll juntos?

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

Esse efeito de carregar os posts horizontalmente pode ser feito com as do flexbox, certo? Errado! Errado se os posts tiverem alturas diferentes, e os meus tem, porque são imagens com o mesmo width mas de height variado.

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

Bom, esse mesmo site 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.