Question

基本上与＆＃34; Creating a html table with dynamically expanding number of columns to fit screen size＆＃34;。

相同的问题

但是，我正在寻找没有第三方库的纯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

以下代码段生成一个从数组派生的图像表。它将生成其他列以确保表在视口中是边对边的。详细信息在源代码中注释。使用展开代码段按钮查看其功能。它只会在加载时不会更改调整大小的列。

段

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>

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

1 个答案:

段