동적으로 생성 된 div에 증분 상대 위치 추가

Question

저는 매우 새로운 코드이므로 초보자 인 경우 맨 먼저 나와주세요. 동적으로 생성 된 div를 사용하여이 모양을 만들려고합니다. 나는 이미 그 자리에이 코드를 가지고 : https://flic.kr/p/mSJm6G

결국 배열에서 이미지를 개최한다 :

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] + "')"; 

나는이 이미지를 생성하고 싶습니다. (그리드의 슬롯 당 하나의 이미지)

나는 단지 작동하지 않는다. 새로운 div가 생성 될 때마다 그 양을 더하는 것이 내가 원하는 것을하지 않는다. 새로운 개체를 만들 때마다 40 픽셀 씩 올리겠습니다.

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

나는 divs/scripts를 만들 필요가 있다고 생각합니다. 각 행마다 하나씩, 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'); 
    port.style.backgroundImage = "url('" + bgImg[3] + "')"; 
    document.body.appendChild(port); 
} 

, 당신은 jQuery이 코드를 사용할 수있는 "최고"속성을 업데이트하려면 :

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 = $('<div></div>'); 
    port.css("background-image", "url('" + bgImg[3] + "')"); 
    port.css("top": 40 * i + "px"); // <- set "top" +40px for each div 
    $("body").append(port); 
}