1
I am creating a site like Pinterest and the commands below picks up the answer (reply = post in html format) of the call itself ajax and apende the post on the screen.
The commands below check which div/column has the lowest height and make the append in the lowest.
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 properly sometimes not.
Sometimes they work 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 is because jQuery didn’t recognize (or at least didn’t have time to acknowledge) that the new posts were appended in the second column and that therefore it is not the one that has the lowest height. So he goes stuffing post on Monday.
Now let’s look at the split commands...
1 - The arr_col_min variable will receive the height of each div/column. 2 - The var_num_of_col variable counts how many columns are on the screen (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 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 append the lowest height. Each post this verification 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 arr_col_min variable.
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 from the same that has the smallest 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 obj_col_min object is assigned with the height value and also with the 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 - Below runs the append in the column that has the smallest size that is given by the Dice of the obj_col_min object.
$('div#col_'+obj_col_min.key).append(val);
That’s how it works, or how it should work...