I'm creating a Pinterest site and the commands below take the answer (post = html format) from the ajax call itself and append the post to the screen.
The commands below verifies which div / column has the smallest height and makes append the smaller one.
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);
});
}
The problem is that sometimes these commands work correctly sometimes.
Sometimes it works like this, as expected:
01,02,03,04,05
06,07,08,09,10
11,12,13,14,15
And sometimes it works like this:
01,02,03,04,05
06,07
08
09
10
11
This happens because jQuery did not recognize (or at least did not have time to recognize) that the new posts were appended in the second column and that therefore it is not which one has the smaller height. Then it fills in post on the second.
Now let's look at the commands in parts ...
1 - The variable arr_col_min will receive the height of each div / column. The variable var_num_of_col counts how many columns on the screen (it is because the system is responsive).
var arr_col_min = [];
var var_num_of_col = get_num_of_col_by_width();
3 - Response is an array in PHP. Key is simply 0, 1, 2, 3 ... And val is the post in html format (basically it's an image inside a div). A $ .each looping is set because, for each post, the following codes will check which column has the lowest height and make the append the smallest. At each post this check is performed (or should).
$.each(response, function(key, val) {
4 - This looping takes each height of the columns on the screen and assigns it to the variable arr_col_min.
for (let idx = 0; idx<=var_num_of_col; idx++) {
arr_col_min[idx] = $('div#col_'+idx).height();
}
5 - This variable in object format was created to receive the post the index of the same one that has the smaller size.
var obj_col_min = {
key: 0,
val: arr_col_min[0]
};
6 - This looping checks whether the column in question (arr_col_min [idx]) is smaller than the column in obj_col_min. If it is, the object obj_col_min is assigned with the height value and also with the index.
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 - Below is executed the append in the column that has the smaller size that is given by the index of the object obj_col_min.
$('div#col_'+obj_col_min.key).append(val);
This is how it works, or how it should work ...