向动态创建的div添加增量相对位置

Question

我正在尝试使用动态创建的div创建此形状。 我已经有以下代码：

var bgImg = ['ScreenShot.png', 'stars.jpg', 'ScreenShot.png', 'stars_1230_600x450.jpg'];

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    document.body.appendChild(port);

port.style.backgroundImage = "url('" + bgImg[3] + "')";

我想创建此图像： https : //flic.kr/p/mSJm6G

最终将保存来自阵列的图像。 （网格上每个插槽一个图像。）

我在下面尝试过，这只行不通，它没有做我想要的，每次创建新的div时都要添加该金额。 我希望每次创建新对象时将其提高40px。

$(port).css('top','+=40n');

我认为我将必须创建三个div /脚本，每行一个，以便我可以使div正确对齐。 主CSS将为div设置负的margin-top，以便它们可以正确地级联。

供参考，我的CSS看起来像这样：

     div {
        height: 190px;
        width:230px;
        background: red;
        position: relative;
        background: #ef4c4d;
        background-position: center;
        float: left;
        margin: 8px;
        top: 30px;
        left: 10px;
    }

    div:before {
        content: '';
        position: absolute;
        bottom: 0; right: 0;
        border-bottom: 60px solid #0d1036;
        border-left: 60px solid transparent;
        width: 0;
    }
    div:after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        border-top: 60px solid #0d1036;
        border-right:60px solid transparent;
        width: 0;
    }

我认为我需要从数组中提取整数，但确实不确定。

Answer 1

我在您的代码中注意到了一些事情：

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    document.body.appendChild(port);
// <- end "}" of for loop is missing here

port.style.backgroundImage = "url('" + bgImg[3] + "')"; // <- will just be applied on the last created div

我想你想要这样的东西：

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    port.style.backgroundImage = "url('" + bgImg[3] + "')";
    document.body.appendChild(port);
}

要更新“ top”属性，可以将此代码与jQuery结合使用 ：

for (var i = 0, n = 12; i < n; i++) {
    var port = $('<div></div>');
    port.css("background-image", "url('" + bgImg[3] + "')");
    port.css("top": 40 * i + "px"); // <- set "top" +40px for each div
    $("body").append(port);
}