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...