자바 루프 반복 행 및 열

Question

좋아, 그래서 그것의 15 이미지의 URL을 가진 JSON 파일이 있습니다. 내가 이루고자하는 목표는 다음과 같습니다.

1-2-3 
4-5-6 
7-8-9 
10-11-12 
13-14-15 

3 열과 5 행의 이미지가 있습니다. 나는 그들을 얻기 위해 이미지를 반복해야하지만 어떻게 행에 그들을 만들 수 있도록 각 행에 3 개의 이미지가 있다는 것을 알아요. 나 jquery 또는 다른 프레임 워크가 아닌 간단한 자바 스크립트를 사용하여. 도움말 정말 감사하겠습니다.

Answer 1

나는 (내가 지금 피곤 해요)이 작동을 보장하지는 않지만,이 같은 트릭을 수행해야합니다

// let's say that arr == [0,1,2,3,4,5,6,7,8] 
result = [] 
for(i=0; i<=arr.length-step; i+=step) 
{ 
    row = [] 
    for(j=i; j<i+step && j<arr.length; i++) 
     row.push(arr[j]); // or arr[j].image_url or whatever you need 
    result.push(row); 
} 
// result is now something like [[0,1,2],[3,4,5],[6,7,8]] 

Answer 2

편집 : 질문의 일부를 다시 읽어 후 의견, 나는 OP가 HTML로 렌더링 된 이미지를 원하고 단순히 2 차원 어레이에 배치하지 않기를 바란다.

주어진 다음의 HTML :

<div id="images_container"></div> 

당신은 이미지 데이터가 JSON 배열을 가지고 같은 것을 할 수있는 '데이터'실제로 대체 될 수 있음을

var data = [ 
    'http://farm4.static.flickr.com/3594/3498411074_f10d546f42_t.jpg', 
    'http://farm4.static.flickr.com/3364/3498396436_44bcdcc06f_t.jpg', 
    'http://farm4.static.flickr.com/3436/3356022463_cd53a9b57d_t.jpg', 
    'http://farm4.static.flickr.com/3422/3356840596_57f5da7842_t.jpg', 
    'http://farm4.static.flickr.com/3180/2776515140_b7cd27cf7e_t.jpg', 
    'http://farm4.static.flickr.com/3273/2758309734_48cfe16860_t.jpg', 
    'http://farm4.static.flickr.com/3156/2758267414_6320ce7bdd_t.jpg']; 

var images = document.createElement("div"); 
images.setAttribute("id", "images"); 

var img; 

for(var index = 0; index < data.length; index++) { 
    // If three images have been placed on a row, 
    // create a new row. 
    if (index % 3 === 0) { 
     row = document.createElement("div"); 
     row.setAttribute("class", "images-row"); 
     images.appendChild(row);   
    } 
    // replace 'data[index]' with the url of the image in each member of the array. 
    img = createImageElement(data[index]); 
    row.appendChild(img); 
} 

images.appendChild(row); 
document.getElementById("images_container").appendChild(images); 

// Creates an image element with the given url. 
function createImageElement(url) { 
    img = document.createElement("img"); 
    img.setAttribute("src", url); 
    img.setAttribute("alt", "image"); 
    return img; 
} 

주을 데이터. 각 이미지 행에 images-row 클래스를 부여했습니다. 이 CSS 클래스를 사용하여 각 행에 원하는 스타일을 적용하고 행의 각 이미지를 적용 할 수 있습니다.

또한이 코드 종류는 동일한 너비와 높이의 이미지를 사용한다고 가정합니다. 이미지의 크기가 다르면 로직이 깨지지 않지만 프리젠 테이션이 약간 펑키하게 보입니다 (CSS가 들어갈 수있는 곳).