将增量相对位置添加到动态创建的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。我想我将不得不创建三个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); 
} 

要更新“顶”属性，你可以使用此代码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); 
}