动态网格-显示嵌入式块

Question

到目前为止，我已经设法编码了几个正方形，并且当我将鼠标悬停在每个正方形上时，每个正方形都有翻转动画，当单击它时，将有一个弹出模式窗口。

我有2个问题：1）我如何显示这些正方形，以便它能跨页面10x10（内嵌块）尝试将内嵌块显示在面板上但没有起作用

拥有这样的东西：

2）将来，网格数量将增加到30x10。 有没有一种方法可以动态绘制这些正方形，JS函数？

任何帮助/建议将不胜感激

Answer 1

1）将inline-block添加到.trigger类应具有您想要的效果，例如：

.trigger {
    display: inline-block;
    width: 60px;
}

JS小提琴

2）您可以使用JQuery直接执行此操作。 首先，您需要一个函数来生成每个框：

function genSquare(front, back) {
        return "<div class='trigger'>\
            <div class='hover panel'>\
          <div class='front'>\
            <div class='box1'>\
              <p>" + front + "</p>\
            </div>\
          </div>\
          <div class='back'>\
            <div class='box2'>\
              <p>"+back+"</p>\
            </div>\
          </div>\
        </div>\
  </div>"
}

然后，您需要为每个要添加的框调用此命令：

$( document ).ready(function() {
    $(genSquare('hello', 'world')).appendTo( '.square-container' );
    ...
}

jQuery根据genSquare()返回的字符串创建一个新元素，并将该元素追加到具有.square-container类的对象.square-container 。 我实际上建议给该容器一个ID来引用它。

JS小提琴

请注意，在设置触发器动画动作之前，我已经动态添加了盒子，以便动画可以在动态添加的盒子上工作。 如果您希望在页面加载后的一段时间内动态添加框，请参见https://stackoverflow.com/a/21239248/4799121 。

Answer 2

您可以添加“ display：flex;” 属性添加到您的.square-container。

.square-container {
   width: 60px;
   margin: 35px auto;
   display: flex;
   margin-left: 10px;
   padding-left: 10px;
}

然后将padding-left添加到.panel。