Javascriptループの行と列

Question

だから私はそれに15画像のURLを持つJSONファイルがあります。私が達成しようとしているのはこういうものです...

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

私は3列と5行の画像を持っています。私はそれらを得るために画像をループする必要があることを知っているが、どのように行に3つの画像があるようにそれらを構築するのですか？私はjQueryや他のフレームワークではなく単純なjavascriptを使用しています。ヘルプは本当に感謝しています。

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が入ってくる場所です）。