Javascript循环行和列

Question

好吧，所以我有一个JSON文件的15个图像在其中的网址。我试图实现的是这样的...

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

这样我有3列和5行图像。我知道我必须通过图像循环来获取它们，但我如何将它们构建成行，以便每行有3个图像。我使用简单的JavaScript而不是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中，而不是简单地放置在一个二维数组。

考虑下面的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可以进入的地方）。