javascript - 动态移动 div 中的元素以适合的数学

Question

我正在用 JS 开发纸牌游戏。玩家的卡片动态显示为设置宽度的 div 中的元素。当牌被添加到玩家的手上时，我使用 right: % 和 z-index 将所有牌向左移动并让它们相互重叠，从而腾出空间在 div 中显示更多卡片(设置为 white-space: nowrap 因此其中的内容不会换行)。

我正在使用 JS 根据每张卡片的原始位置和需要显示的卡片总数来计算和设置卡片向左移动的百分比。

总体计划可行，但我无法弄清楚如何计算适用于任意数量卡片的百分比。理想情况下，我希望卡片向左移动得足够多，这样无论有多少卡片，它们都不会延伸到 div 之外，而是始终完全填满它。

我认为以下方法可行:

function displayHand(cards) {
  for(var i = 0; i < cards.length; i++) {
    var cardDiv = document.createElement("div");
    document.getElementById(“playerHand”).appendChild(cardDiv);
    if(cards.length > 7) {
      cardDiv.setAttribute("style", "z-index: " + i + "; right: " 
        + (i * cards.length) * (0.04815 * cards.length) + "%");
    }
}

但是，我似乎弄错了这个公式:(i * cards.length) * (0.04815 * cards.length)。 (请注意，0.04815 数字来自修补并试图获得正确的百分比。)

通过增加 0.04815 数字，我可以使少量卡片(即 8-12)适合，但较大的数字会移动得太近，只填充 div 的一小部分。如果我减少数量，12 张卡片将溢出 div，但更大的数量将适合它。

Answer 1

问题在于您不需要第一张牌来移动。您的 cards.length 系数太高。

相反，您只需要考虑 cards.length-1。

例如，假设我可以完全放入两张卡片。要添加第三张卡片，我需要在放置两张卡片(在第一张卡片之后)时将卡片向左移动总共 1 张卡片宽度。也就是说，在 50% 和 100% 时。添加第四张牌将导致牌移动 1/3、2/3 和 3/3。等等。

所以它应该只是将它移动 i * (cards.length-1) * (card width here)