Как равномерно разбить данные по колонкам?

Question

[Andrey Vasilev]

Есть условно говоря 3 списка.
Имеется массив с городами (случайное кол-во).
Нужно как-то равномерно разбросать все города по этим трем спискам.
Что-то вроде того:

Есть блок, который связывает все 3 списка (wrapper).
Списки разбиты отдельно 'city-column' > 'city-column__item'.
Интересует именно вариант на JS, понимаю что можно переверстать и впаять флексы.

Comments

[Kovalsky]

А в чем конкретно проблема? Разбить массив из 27и элементов на порции по 9 штук? Покажите лучше как попытались решить чтоб было понятно в чем проблема

[Ankhena]

Зачем это делать на js, если в css есть columns?

Answer 1

[origami1024]

А один список без флексов и без js со свойствами column-fill: balance-all; и column-count: 3; не пойдет?

Comments

[Aetae]

Только не auto, а balance.

[origami1024]

Aetae, точно, ну тогда уже может balance-all еще лучше будет?

Answer 2

[0xD34F]

Вычисляемое свойство:

data: () => ({
  items: [ ... ], // массив данных
  columns: 666, // количество колонок, на которые надо разбить items
}),
computed: {
  columnItems() {
    const { items, columns } = this;
    const colSize = Math.ceil(items.length / columns);
    return Array.from(
      { length: columns },
      (n, i) => items.slice(i * colSize, (i + 1) * colSize)
    );
  },
},

<ul v-for="col in columnItems">
  <li v-for="n in col">{{ n }}</li>
</ul>

Comments

[Andrey Vasilev]

в яблочко