Critérios de alinhamento:
- Alinhar a esquerda a partir do elemento com menor valor de 'left'.
- Elementos com colisão devem permanecer ao lado do elemento colidido.
No exemplo o algoritmo busca o elemento mais a esquerda em referência aos outros elementos e armazena sua posição, em seguida busca alinhar todos os outros elementos a partir do dado armazenado.
arrayTopValue = [];
arrayLeftValue = [];
arrayLeftOriginal = [];
arrayWidth = [];
arrayHeight = [];
arrayIdDivs = [];
arrayAboutDivCollision = [];
$("#boxExample").children().each(function() {
//top
var position = $(this).css("top").indexOf("px");
var res = $(this).css("top").substr(0, position);
arrayTopValue.push(parseInt(res));
//left
var position = $(this).css("left").indexOf("px");
var res = $(this).css("left").substr(0, position);
arrayLeftValue.push(parseInt(res));
arrayLeftOriginal.push(parseInt(res));
arrayLeftValue.sort(function(a, b) {
return a - b
});
//width
var position = $(this).css("width").indexOf("px");
var res = $(this).css("width").substr(0, position);
arrayWidth.push(parseInt(res));
//height
var position = $(this).css("height").indexOf("px");
var res = $(this).css("height").substr(0, position);
arrayHeight.push(parseInt(res));
//idDivs
var tempIds = $(this).attr("id");
arrayIdDivs.push(tempIds);
});
Como o algoritmo sabe que vai colidir ou não? Para saber isso o algoritmo checa se o elemento que vai alinhar a esquerda, está acima do elemento armazenado:
if (distTopPlusHeightRefNext < distTopRef)
{
$("#" + arrayIdDivsFolllow[i]).css({'left': arrayLeftValue[0] + "px"
});
Se o elemento está acima, ele aplica a posição left armazenada, para o elemento que vai ser alinhado a esquerda.
O mesmo acontece se o elemento para ser alinhado está abaixo do elemento armazenado.
if (distTopRefNext > distTopPlusHeightRef)
{
$("#" + arrayIdDivsFolllow[i]).css({'left': arrayLeftValue[0] + "px"
});
Então quando essas duas opções anteriores não são possíveis de alinhar, significa que o elemento vai colidir.
if (distTopPlusHeightRefNext > distTopRef && distTopRefNext < distTopPlusHeightRef) {
var tempValue = marginLeftPlusWidthRef;
tempValue = tempValue + 3; //Espaço entre os elementos em pixel
$("#" + arrayIdDivsFolllow[i]).css({'left': tempValue + "px"
});
Uma vez que o elemento vá colidir, os valores de referência precisam estar atualizados, para que o elemento possa alinhar a partir do elemento mais próximo. Ex: getValDivs().
Mas existe um erro porque a div1 não está colidindo com a div3, como pode ser visto em https://fiddle.jshell.net/43jwxh35/ como quando também dois elementos tem a mesma posição gera um bug de alinhamento, alguém poderia me dizer o que esta errado? Grato