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中的

列数是最好的，但在响应

上工作错误

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

我使用bootstrap for HTML

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

Answer 1

您可以使用以下代码根据大小管理td的数量，您可以将下面的代码放入函数中，并在jQuery提供的window resize事件上调用此函数。就像我在例子中所做的那样

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>

Answer 2

由于您正在使用Vue，因此请按列使用针对项目的计算。这样当item或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>

此代码未经过测试，但它应该可以帮助您。

数组按字母表排列的不同列的垂直顺序

2 个答案: