javascript - 通过 JavaScript 为 CSS 网格生成单元格

Question

我正在尝试动态生成网格单元，但以特定的模式。 我复制了很多<div> s，手动进行了必要的调整，并得到了我需要的结果，但我想知道是否有人可以帮助我开发一种自动生成它的算法。如果你看下面的例子，左边的框就是我想要动态计算的。

function calcCells(){
let cells = '';
  for(let a = 1; a <= 10; a++){
    for(let b = 1; b <= a; b++){
        cells += `<div style="background:#fd8362; grid-area: ${a % b} / ${a % b} / ${a % b} / ${a % b}">
        ${b}
      </div>`
    }
  }
  return cells;
}

document.getElementById("grid-body-algorithm").innerHTML = calcCells();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body">
  <div style="background:#fd8362; grid-area: 1 / 1 / 1 / 1">1</div>

  <div style="background:#ffad97; grid-area: 2 / 1 / 2 / 1">1</div>
  <div style="background:#ffad97; grid-area: 1 / 2 / 1 / 2">2</div>

  <div style="background:#ffded6; grid-area: 3 / 1 / 3 / 1">1</div>
  <div style="background:#ffded6; grid-area: 2 / 2 / 2 / 2">2</div>
  <div style="background:#ffded6; grid-area: 1 / 3 / 1 / 3">3</div>

  <div style="background:#fff0ec; grid-area: 4 / 1 / 4 / 1">1</div>
  <div style="background:#fff0ec; grid-area: 3 / 2 / 3 / 2">2</div>
  <div style="background:#fff0ec; grid-area: 2 / 3 / 2 / 3">3</div>
  <div style="background:#fff0ec; grid-area: 1 / 4 / 2 / 4">4</div>
</div>

<div id="grid-body-algorithm">
  
</div>

Answer 1

从所需的输出中，我们可以看到taxicab distance从左上角开始确定所需的颜色，列号确定单元格文本。

内环路应限制在最大出租车距离内。该最大值可以是您的函数的参数。在您的示例中，最大值为 3(因为相关的最远单元格距左上角单元格 3 出租车步)。

此外，出租车距离越远，所需的颜色似乎越浅。为此，我们可以改变 alpha相同的固定背景颜色的一部分。在 RGBA 表示法中，该 alpha 分量的值可以在 0 到 1 之间。

我选择创建 document fragment而不是 HTML。这样单元格属性的设置更加受 JS 语法控制并且更加面向对象。

我没有碰你的CSS。

在此实现中，我添加了一个输入框，您可以使用它控制将使用的最大出租车距离:

function calcCells(maxDistance) {
  const fragment = document.createDocumentFragment();
  for (let row = 1; row <= 5; row++) {
    // row + col - 2 is taxicab distance from top-left corner
    for (let col = 1, distance = row - 1; distance <= maxDistance && col <= 5; col++, distance++) { 
        const cell = document.createElement("div");
        // Set background transparency with the alpha part of the background color
        cell.style.background = `rgba(240,120,80,${1 - (distance + 0.5) / (maxDistance + 1)})`;
        cell.style.gridArea = [row, col, row, col].join(" / ");
        cell.textContent = col;
        fragment.appendChild(cell);
    }
  }
  return fragment;
}

const inputDistance = document.querySelector("input");
const outputGrid = document.getElementById("grid-body-algorithm");

function refresh() {
    const maxDistance = +inputDistance.value;
    outputGrid.innerHTML = ""; // clear previous content
    outputGrid.appendChild(calcCells(maxDistance));
}

inputDistance.addEventListener("click", refresh);
refresh();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body-algorithm"></div>
distance: <input type="number" value="3" min="0" max="8">