Просто фрагмент, который может быть полезен.

Макеты почти всегда требуют макетов с несколькими столбцами, для чего мы стремимся к сетке - в настоящее время сетка Zurb Foundation x-y (flexbox) отлично подходит.

Я также сейчас использую Vue.js для обеспечения реактивного взаимодействия с пользователем - это действительно блестящая программа.

Это означает, что я получаю данные в виде объектов json, которые часто необходимо разделить по столбцам - например, список элементов, которые необходимо отображать в трех столбцах для экранов среднего и большого размера.

Чтобы добиться этого, я использую столько столбцов, сколько требует дизайн - часто три или четыре - и мне нужен способ автоматического разделения объектов в моем json по столбцам.

v-for отлично выполняет итерацию элементов, но нам нужно наполнить его данными.

Итак, я написал небольшую функцию для разделения списка на столько столбцов, сколько требуется, она принимает два аргумента: первый - это столбец, а второй - количество столбцов, то есть (1,3) - это первый столбец из трех, (3, 4) - это столбец три из четырех и т. Д., Методу не важно, сколько столбцов, просто убедитесь, что вы согласованы при использовании его в блоке данных - (1,3), (2,3), (3,3 ) буду работать; (1,3), (2, 4) не будет - он будет работать, но вы получите повторы для своих элементов.

Данные выглядят так: (vue data - любой массив, обычно извлекаемый из api как json).

export default {
    data() {
        return {
            items: [
                { name: 'Foo', id: 1 },
                { name: 'Bar', id: 2 },
            ],
        };
    }

Метод выглядит так: (метод vue)

methods: {
    filteredItems(column, columns) {
        const self = this; // Enables us to pass this to the method
        const total = this.items.length; // How many items
        const gap = Math.ceil(total / columns); // How many per col
        let top = (gap * column); // Top of the col
        const bottom = ((top - gap) + 1); // Bottom of the col
        top -= 1; // Adjust top back down one
        return self.items.filter(item =>
            self.items.indexOf(item) >= bottom
            && self.items.indexOf(item) <= top,
        ); // Return the items for the given col
    },
},

V-for выглядит так:

<!-- First column (within a div with css classes for columns) -->
<li v-for="item in filteredItems(1, 3)" :key="item.id">
    {{ item.name }}
 </li>
<!-- Second column -->
<li v-for="item in filteredItems(2, 3)" :key="item.id">
    {{ item.name }}
 </li>

Метод должен работать на любом массиве. Он разделит данные на (более или менее) равные столбцы. Я говорю более или менее, потому что вы можете получить, например, 4,4,2, разделив десять на три столбца. Это меня устраивало, поэтому я не стал добавлять аргумент, чтобы указать, как взвешивать столбцы, когда элементы не делятся поровну, хотя это было бы вполне выполнимо.

Возможно, существуют более эффективные способы достижения этого результата (я не хотел использовать столбцы CSS, поскольку сетка xy дает мне лучший контроль), но это сработало для меня, я рад услышать альтернативы и предлагаемые улучшения!