javascript - 在计算JavaScript中绘制数组的正确算法时遇到麻烦

Question

这是我的jsbin:http://jsbin.com/mipazizakafe/1/edit

我想做的是在我的div中绘制这个图像

代码:

function loademoji(RowCount,ColumnCount){
 var toAppend = "<div class='emojiContainer_div'><table  width='100%'>";
  for (i = 0; i < RowCount; i++) {
    toAppend += "<tr>";
    for (j = 0; j < ColumnCount; j++) {
        toAppend += "<td><div class='emojiIcon' style='background-position:" + RowCount + "px " + ColumnCount * i + "px;' ></div></td>";
    }
    toAppend += "</tr>";
}
toAppend += "</table></div>";
return toAppend;

}RowCount 是要绘制的行数，ColumnCount 是要绘制的列数，正如你所看到的，我在绘制图像时遇到了一些麻烦，任何人都可以帮助我修复我的算法

Answer 1

这是一个工作版本:http://jsbin.com/tepocevakolo/3/edit

您需要负背景位置来向下/向右移动。

function loademoji(RowCount,ColumnCount){
   var toAppend = "<div class='emojiContainer_div'><table  width='100%'>";
    for (i = 0; i < RowCount; i++) {
        toAppend += "<tr>";
        for (j = 0; j < ColumnCount; j++) {
            toAppend += "<td><div class='emojiIcon' style='background-position: -" + j*17 + "px -" + i*17 + "px;' ></div></td>";
        }
        toAppend += "</tr>";
    }
    toAppend += "</table></div>";
    return toAppend;

}

编辑(更改为 19 -> 17)。另请注意 CSS 略有修改 width:17px;高度:17px；