Массив Вертикальный порядок в разных столбцах по алфавиту

Question

A | B | D | F
A | C | E | G
B | C |

У меня есть массив данных, который:

• Необходимо выровнять по алфавиту по вертикали;
• Нужно заказать массив на 4 колонки для больших экранов;
• необходимо упорядочить массив на 3 столбца для средних экранов;
• нужно заказать массив на 2 столбца для маленьких экранов;
• порядок должен быть алфавитным;

Пример 3 столбцов

A | C | E
A | C | F
B | D | G
B |

column-count в CSS на данный момент является лучшим, но работает неправильно на отзывчивом

Я думал о Vue.js, который в зависимости от размера экрана (может добавлять / удалять столбцы) и перемещать данные массива между столбцами

Я использую загрузчик для HTML

Вот код, который я сделал, но его недостаточно для работы по мере необходимости https://codepen.io/alexander-chumak/pen/JvyLPJ

Answer 1

Поскольку вы используете Vue, я бы использовал вычисленные для элементов по столбцам. Таким образом, когда элементы или columnCount меняются, вам не нужно беспокоиться о повторном запуске чего-либо самостоятельно.

Вы можете сделать что-то вроде:

data () {
  return {
    columnCount: 2,
    items: [],
  }
},

created () {
  // You should debounce this callback.
  window.addEvenetListener('resize', this.updateColumnCount)
  this.updateColumnCount()
},

destroyed () {
  window.removeEventListener('resize', this.updateColumnCount)
},

methods: {
  updateColumnCount () {
    // updat the columnCount here like: this.columnCount = 2
  },
},

computed: {
  itemsByColumn () {
    return this.items.reduce((columns, item, index) => {
      const columnNumber = index % this.columnCount

      if (!columns[columnNumber]) {
        columns[columnNumber] = []
      }

      columns[columnNumber].push(item)

      return columns
    })
  },
},

Затем в вашем шаблоне вы можете сделать так:

<div class="flex">
  <div class="column" v-for="(column, index) in itemsByColumn" :key="index">
    <div class="item" v-for="item in column" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</div>

Этот код не тестировался, но в большинстве случаев он вам нужен.

Answer 2

Вы можете использовать приведенный ниже код для управления количеством td в зависимости от размера, вы можете поместить приведенный ниже код в функцию и вызывать эту функцию при событии изменения размера окна, предоставленном jQuery. как я сделал в примере

function drawTable(){
    var array = ["a","b","c","d","e","f","g","h","i","j","k","l","m"];
    var windowSize = $(window).width();
    var maxWidth = 50;
    var maxColumn = 2;

    if(windowSize < 400){
        maxWidth = 33;
        maxColumn = 3;
    }
    if(windowSize < 800){
        maxWidth = 25;
        maxColumn = 4;
    }
    
    var maxItemInColumn = Math.ceil(array.length/maxColumn);
    
    var result = "<div style='width:100%;'>";
    result += "<ul style='float:left;'>";
    for (var j = 0; j < array.length; j++) {
        result += "<li>" + array[j] + "</li>";
        if ((j + 1) % maxItemInColumn === 0) {
            result += "</ul><ul style='float:left;'>";
        }
    }
    result += "</ul>";
    result += "</div>";

    document.body.innerHTML = result;
}
drawTable();
$( window ).resize(function() {
    drawTable()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>