javascript - 使用 javascript 连续生成 div(tiles)，除了标记为 0 的以外，所有大小都相同

Question

我正在尝试使用 javascript 连续显示一些 div。为此，我有以下 JScode:

var levels = [
    [
        [1,2,0,1,2,1]
    ]
];

如果为 1，它将显示红色 div block ，如果为 2，则显示蓝色 div block ，如果为 0，则不显示任何 block 。这一切都可以。 div 为 100 x100px，它生成的 HTML 如下所示:

<div id="plane">
  <div class="tile tile1" style="left:0px; top:0px"></div>
  <div class="tile tile2" style="left:100px; top:0px"></div>
  <div class="tile tile1" style="left:300px; top:0px"></div>
  <div class="tile tile2" style="left:400px; top:0px"></div>
  <div class="tile tile1" style="left:500px; top:0px"></div>
</div>

由这部分JS代码完成:

this.getHTML = function () {
        return '<div class="tile tile'+this.type+'" style="left:'+this.x*100+'px; top:'+this.y*100+'px"></div>';
    };

如您所见，未显示 0 block 。我遇到的问题是这个 0 block 也是 100x100px，而我希望它是 50x50px。所以只有 0 block 50x50px，所有其他 block 应该保持 100x100px，这样它会产生:

<div id="plane">
      <div class="tile tile1" style="left:0px; top:0px"></div>
      <div class="tile tile2" style="left:100px; top:0px"></div>
      <div class="tile tile1" style="left:250px; top:0px"></div>
      <div class="tile tile2" style="left:350px; top:0px"></div>
      <div class="tile tile1" style="left:450px; top:0px"></div>
    </div>

但是如何正确地做到这一点呢？我有点被困在这里。我试过调整 CSS 值，但这不起作用。

请看我的 fiddle (点击 1 查看 block ):http://jsfiddle.net/mauricederegt/8aNL9/

亲切的问候

Answer 1

大声思考..

在宽度/高度可变的情况下，如果一个图 block 必须知道(或计算)它自己的 x,y 坐标，它还必须“知道”在它之前出现的所有图 block - 垂直和水平方向 - 否则你面对你目前的问题。或者，生成循环必须跟踪“当前”x/y 位置并将其分配给图 block 。

不管它是如何实现的，在算法上，都有一个预定义的 100x100px 正方形网格，带有“知道”它自己的 [i,j] 位置的瓷砖(它可以从中计算出它的 x,y 坐标和宽度)与具有 nxm px 瓷砖的网格非常不同。

也许您可以尝试将 x/y 坐标传递给图 block 对象，而不是它的 i,j 位置？

更新:忍不住玩这个..

loadLevel: function (newLevel) {
    level = newLevel;
    tiles = [];
    var html = [];
    var currentX = 0;
    var currentY = 0;

    for (var i = 0, lngi = levels[level].length; i < lngi; i++) {
        for (var j = 0, lngj = levels[level][i].length; j < lngj; j++) {
            if (levels[level][i][j] > 0) {
                var curIndex = tiles.length;
                tiles[curIndex] = new tile(levels[level][i][j], i, j, curIndex, currentX, currentY);
                html.push(tiles[curIndex].getHTML());
                currentX += tileWidth;
            }
            else if(levels[level][i][j] === 0) {
                currentX += blankWidth;
            }   
        }
        //Start a new row
        currentY += tileHeight;
        currentX = 0;
    }
    el.innerHTML = html.join('');
}

请参阅此 fiddle 以获得完整的代码 list ..
http://jsfiddle.net/7Yprn/

请注意，行高是固定的，导致 50x100 像素的垂直矩形，而不是您在原始问题中要求的 50x50 像素的间隙: