Как сдвинуть последние элементы в блоке?

Question

[inkShio]

Сделал скрипт, который сдвигает последние элементы при определенных условиях.
Имеются кружки и надо искать элементы имеющие отступ т.е.:

Найденным элементам задавать класс для сдвига и все пересчитывать при resize что бы получилось:

В прикрепленном примере все работает, НО возможно кто то подскажет более лучший подход для решения этой задачи.

Answer 1

[antanol]

ну, если предположить, что кол-во областей с кругами будет масштабироваться, можно создать функцию detectAll, которая будет сама перебирать все wrap-ы, и вызывать им функцию detect:

function detectAll(container){
  let detectedItems = document.querySelectorAll(container);
  for (let item of detectedItems){
    detect(item.classList[1]);
  }
}
window.onload = function () {
  detectAll(".wrap");
  window.onresize = function () {
    detectAll(".wrap");
  };
};

Хотя моё "classList[1]" лучше заменить чем-то, ориентирующемся на имя класса. Типа, если содержит "js-", то вызвать
В этом случае ещё изменяется первая строка в detect:

function detect(className) {
  const parent = document.querySelector(`.${className}`);

Строки 11-19. Тут две проверки выполняют одно действие, т.е. можно написать вот так:

if ((prevItem.length == 0) || (prevItem < currItem)) {
      obj.push({ a: [item] });
    } else {
      obj[obj.length - 1].a.push(item);
    }

+ таким образом мы избавимся от лишней вложенности

Строка 29.
Тут избыточны true и false. Само по себе равенство вернёт эти ответы.
Т.е. вот две аналогичных переменных:
let even = ((countPenult - countLast) % 2 == 0);

и ваша

let even = ((countPenult - countLast) % 2 == 0 ? true : false);

Comments

[antanol]

Всё вышесказанное, но в кодпене:

[antanol]

Кстати, ещё бы не помешали комментарии, что вообще делают эти проверки и зачем нужны, потому что лично мне это неочевидно. Зачем перезаписывать последний obj в строке 17 у вас, например

[inkShio]

Строки 11-19. Тут две проверки выполняют одно действие, т.е. можно написать вот так:

good

Тут избыточны true и false. Само по себе равенство вернёт эти ответы.

good

Т.к. других предложенных вариантов нету и скорее не будет, отмечу решением Вас.