將增量相對位置添加到動態創建的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); 
}