1

Estou criando um site tipo Pinterest e os comandos abaixo pega a resposta (resposta = post em formato html) da própria chamada ajax e apende o post na tela.

Os comandos abaixo verifica qual div/coluna tem o menor height e faz o append na menor.

success: function(response) {

    var arr_col_min = [];

    var var_num_of_col = get_num_of_col_by_width();

    $.each(response, function(key, val) {


        for (let idx = 0; idx<=var_num_of_col; idx++) {

            arr_col_min[idx] = $('div#col_'+idx).height();

        }

        var obj_col_min = {
            key: 0, 
            val: arr_col_min[0]
        };


        for (let idx = 0; idx<=var_num_of_col; idx++) {

            if(arr_col_min[idx] < obj_col_min.val) {

                obj_col_min.key = idx;
                obj_col_min.val = arr_col_min[idx];

            }

        }

        $('div#col_'+obj_col_min.key).append(val);

    });

}

O problema é que as vezes esses comandos funcionam corretamente as vezes não.

As vezes funcionam assim, como o esperado:

01,02,03,04,05
06,07,08,09,10
11,12,13,14,15

E as vezes funciona tipo assim:

01,02,03,04,05
06,07
   08
   09
   10
   11

Isso acontece porque o jQuery não reconheceu (ou pelo menos não teve tempo de reconhecer) que os novos posts foram apendidos na segunda coluna e que portanto ela não é qual tem o menor height. Então ele vai enchendo de post na segunda.

Agora vejamos os comandos por partes...

1 - A variavel arr_col_min ira receber o height de cada div/coluna. 2 - A variavel var_num_of_col conta quantas colunas tem na tela (é porque o sistema é responsível).

var arr_col_min = [];

var var_num_of_col = get_num_of_col_by_width();

3 - Response é um array em PHP. Key é simplesmente 0, 1, 2, 3... E val é o post em formato html (basicamente é uma imagem dentro duma div). Está configurado um looping $.each porque, para cada post, os codigos a seguir irão verificar qual coluna tem o menor height e fazer o append na menor. A cada post essa verificação é executada (ou deveria).

$.each(response, function(key, val) {

4 - Esse looping pega cada height das colunas na tela e atribui ele na variavel arr_col_min.

for (let idx = 0; idx<=var_num_of_col; idx++) {

    arr_col_min[idx] = $('div#col_'+idx).height();

}

5 - Essa variavel em formato de objeto foi criada pra receber o post o indice do mesmo que tem o menor tamanho.

var obj_col_min = {
    key: 0, 
    val: arr_col_min[0]
};

6 - Esse looping verifica se a coluna em questão (arr_col_min[idx]) é menor do que a coluna em obj_col_min. Se for, o objeto obj_col_min é atribuido com o valor da altura e também com o indice.

for (let idx = 0; idx<=var_num_of_col; idx++) {

    if(arr_col_min[idx] < obj_col_min.val) {

        obj_col_min.key = idx;
        obj_col_min.val = arr_col_min[idx];

    }

}

7 - Abaixo é executado o append na coluna que tem o menor tamanho que é dado pelo indice do objeto obj_col_min.

$('div#col_'+obj_col_min.key).append(val);

É assim que funciona, ou como deveria funcionar...

0

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

Pesquise outras perguntas com a tag .