具有可变列数以适应屏幕的 CSS 表

Question

与“Creating a html table with dynamically expanding number of columns to fit screen size”基本相同的问题。

但是，我正在寻找一个没有第三方库的纯 Javascript 解决方案。我无权访问它们。

起点如下：

<div id="icons"></div>

#icons {
  display: table;
  width: 100%;
}
.iconBody { display: table-row-group; } /* May not be necessary to solution */
.iconRow { display: table-row; }
.iconCell { display: table-cell; }

function loadValues() {
  // other stuff
  var iconTable = document.getElementById("icons");

  // TODO following lines are editable to suit the solution as necessary
  for (var i = 0; i < icons.length; ++i) {
    addIcon(iconTable, icons[i]);
  }
}

function addIcon(iconTable,  icon)  {
  // TODO add solution here

  // Row addition example
  var row = document.createElement("DIV");
  row.className = "iconRow";
  iconTable.appendChild(row);

  // Cell addition example
  var cell = document.createElement("DIV");
  cell.className = "iconCell";
  row.appendChild(cell);

  // Icon addition example
  var iconImg = document.createElement("IMG");
  var iconImg.src = icon.srcPath;
  iconImg.addEventListener("click", someFunction);
  cell.appendChild(iconImg) ;
}

此表没有标题/标签，只有一组图标供用户从中选择一个。图标彼此具有相同的尺寸，尽管图标存储在服务器端，因此我可能会或可能无法获得它们的尺寸值。但是，这些值永远不会改变。显示页面的应用程序面板可以调整大小，因此我希望此表必须根据面板的当前宽度适合的列数而不会水平溢出。

应用程序使用 IE 11.212.10586.0 显示网页。

Answer 1

以下代码段生成从数组派生的图像表。它将生成额外的列以确保表格在视口中是边到边的。细节在源代码中注释。使用 Expand sn-p 按钮查看它的功能。它不会在调整大小时更改列，只是在加载时。

片段

Usage:
 iconGrid(rows);
 rows = integer representing the amount of rows desired by user or developer.

/*[iconGrid]~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

// Array of image url fragment from server
var icos = ['00e/fc0?text=I1.png', '000/fff?text=I2.png', 'e00/000?text=I3.png', '0e0/fff?text=I4.png', 'e0e/000?text=I5.png'];

// Reference the table
var icons = document.getElementById('icons');

// Create a documentFragment - faster to append to
var frag = document.createDocumentFragment();

// Declare increment vars outside of loop
var i;
var j;

/*
| genIcons(number of rows, number of columns)
|
| First loop creates a row and appends it to frag
|
| Second loop creates img and cells equal to the
| amount of columns designated by the second parameter
|
| Upon each iteration rows are given .row class and 
| cells are given .cel class. Each row and cell gets an
| id as well
|
| Each img is given a base url that points to the 
| location of the image files. The actual filename is 
| determined from the icos[] array from the server.
|
| Last step the frag is appended to #icons. 
*/
function genIcons(x, y) {
  var rows = parseInt(x, 10);
  var cels = parseInt(y, 10);
  for (i = 0; i < rows; i++) {
    var row = document.createElement('section');
    row.id = 'r' + i;
    row.className = 'row';
    frag.appendChild(row);
    for (j = 0; j < cels; j++) {
      var ico = document.createElement('img');
      var cel = document.createElement('div');
      ico.src = 'http://placehold.it/50x50/' + icos[j];
      cel.appendChild(ico);
      cel.id = 'c' + i + j;
      cel.className = 'cel';
      row.appendChild(cel);
    }
  }
  icons.appendChild(frag);
}

/*
| iconGrid(number of rows)
|
| vpWidth is the viewport width in px. This
| measures the width of visible area of the 
| browser's window in somecases like an iframe such 
| as the one on the right is the viewport.
|
| The number of columns needed is determined by the
| viewport width divided by 50 (the set width of a cell)
|
| Finally, genIcons() creates the grid with the number
| of rows determined by you and the number of columns 
| determined by viewport width. Note: there are 5 colors in
| in the icos[] array the white cells were made to fill
| width.
*/
function iconGrid(rows) {
  var vpWidth = window.innerWidth;
  var columns = Math.floor(vpWidth / 50);
  genIcons(rows, columns);
}

iconGrid(5);

#icons {
  table-layout: fixed;
  display: table;
  border-collapse: collapse;
  min-width: 50px;
  width: 99vw;
  overflow: hidden;
}
section {
  width: 100%;
  display: table-row;
}
section > div {
  width: 50px;
  display: table-cell;
  outline: 1px solid red;
}
img {
  display: block;
}

<main id="icons"></main>