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为负边距顶部，以便它们可以正常级联。

供参考，我的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);
}

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

1 个答案: