按字母表排列在不同列中的垂直顺序

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 |

CSS 中的

column-count 是目前最好的，但在响应式上工作错误

我在考虑 Vue.js，它取决于屏幕大小（可以添加/删除列）并在列之间移动数组数据

我为 HTML 使用引导程序

这里是我做的代码，但是还不够工作需要https://codepen.io/alexander-chumak/pen/JvyLPJ

Answer 1

由于您使用的是 Vue，因此我将按列对项目使用计算值。这样，当 items 或 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

您可以使用下面的代码来管理基于 size 的 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>