Javascript Loop Zeilen und Spalten

Question

Ok, also ich habe eine JSON-Datei mit URLs von 15 Bildern drin. Was ich versuche zu erreichen, so etwas wie so ...

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

Damit ich habe 3 Spalten und 5 Reihen von Bildern. Ich weiß, dass ich die Bilder durchlaufen muss, um sie zu bekommen, aber wie baue ich sie in Reihen, so dass es in jeder Reihe 3 Bilder gibt. Ich verwende einfaches Javascript nicht jquery oder irgendein anderes Rahmenwerk. Hilfe würde wirklich geschätzt werden.

Answer 1

ich nicht garantieren, dies funktioniert (ich bin jetzt müde), aber so etwas wie dies sollte es tun:

// 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

Edit: Nach dem erneuten Lesen der Frage und einig die Kommentare, ich glaube, die OP will die Bilder in HTML gerendert und nicht einfach in einem zweidimensionalen Array platziert.

Angesichts der folgende HTML:

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

Sie können einen JSON-Array mit Bilddaten nehmen und etwas tun:

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; 
} 

Hinweis, dass 'Daten' mit dem tatsächlichen ersetzt werden können Daten. Ich habe jeder Bildreihe eine Klasse von images-row gegeben. Mit dieser CSS-Klasse können Sie beliebige Stile auf jede Zeile und jedes Bild in der Zeile anwenden.

Beachten Sie auch, dass dieser Code Art von Bildern der gleichen Breite und Höhe annimmt. Die Logik wird nicht brechen, wenn die Bilder verschiedene Größen haben, aber die Präsentation wird ein wenig funky aussehen (das ist, wo das CSS hereinkommen könnte).