Javascript 将图像排列成一堆卡片

Question

我是 javascript 的新手，所以我确信我对它的理解有很多缺失。 我正在尝试做的是创建一层图像，使其看起来像一堆卡片。

看过类似的代码并尝试遵循他们的想法，但我就是无法正确定位图像。所有 10 张左右的图像都放在完全相同的位置。

能帮忙看看为什么不定位吗？还有什么是“em”。我找不到任何关于它的文献，但假设它是像 px 这样的测量 em ??为什么在 ""中？

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
var img = document.createElement("IMG");
img.src = "wendell7_back.png";
el = document.getElementById('deck');
el.appendChild(img);
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top  = top + "em";
    el.appendChild(cardNode);
    left += 0.1;
    top  += 0.1;
}

   }

Answer 1

“em”是正在使用的任何字体中“M”的宽度(如果没有覆盖它，则为浏览器的默认字体)。

您的代码中至少有两处错误: left 和 top 没有任何意义，除非它们所应用的元素也具有 position:absolute 或 position:relative (或 position:fixed 我认为)。最安全的方法是将 position:relative (但没有 left: 或 top:) 应用于容器，并将 position:absolute 应用于每张卡片。 只有一个 img。对于多张卡片，您需要多个 img，否则同一个 img 会一遍又一遍地重新定位。 一种更经济的方法可能是为多张卡片显示单独的“堆叠”图像，为单张卡片显示单张卡片图像。

一种更经济的方法是仅显示带有“工具提示”的单张卡片图像以指示一叠卡片的数量。我已经成功地将这种技术应用于患者游戏的实现中。

当然，如果您想将多张卡片显示为“呈扇形展开”的朝上卡片堆，那么这些替代技术就不起作用了。 创建一个类并修改它在甲板上的位置。这是工作代码:

function Display() {
var el;
var left = 0;
var top = 0;
var i=0;
var n = deck.length;
var cardNode;
el = document.getElementById('deck');
while (el.firstChild != null) el.removeChild(el.firstChild);
for (i = 0; i < Math.round(n / 5); i++) 
{
    cardNode = document.createElement("DIV");
    cardNode.className = "card2";
    var img = document.createElement("IMG");
    img.src = "wendell7_back.png";
    cardNode.appendChild(img);
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em";
    el.appendChild(cardNode);
    left += .1;
    top  -= 6.2;
}

}

希望这会有所帮助。