Ok so i have a JSON file with urls of 15 images in it. What i am trying to achieve is something like so...

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

So that I have 3 columns and 5 rows of images. I know i have to loop through the images to get them but how do i build them into rows so that there are 3 images in each row. Im using simple javascript not jquery or any other framework. Help would be really appreciated.

Ok so i have a JSON file with urls of 15 images in it. What i am trying to achieve is something like so...

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

So that I have 3 columns and 5 rows of images. I know i have to loop through the images to get them but how do i build them into rows so that there are 3 images in each row. Im using simple javascript not jquery or any other framework. Help would be really appreciated.

• javascript
• image
• while-loop

Share Improve this question Follow asked Nov 28, 2010 at 21:35 ChrisMJChrisMJ 1,62055 gold badges2121 silver badges2727 bronze badges 5

• By 'JSON file' do you mean a JSON array or a JSON object? Could you add a sample of your JSON? – Andrew Whitaker Commented Nov 28, 2010 at 21:39
• Sorry yea, its a JSON array with lots of objects within it – ChrisMJ Commented Nov 28, 2010 at 21:41
• Are you trying to create table with three columns and five rows then append to the document, or have this in array? – user447356 Commented Nov 28, 2010 at 22:08
• going to be appending the images on a document – ChrisMJ Commented Nov 28, 2010 at 22:13
• I would ideal like something like this but in javascript stackoverflow./questions/2025387/… – ChrisMJ Commented Nov 29, 2010 at 0:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Edit: After re-reading the question and some of the ments, I believe the OP wants the images rendered in HTML and not simply placed in a two-dimensional array.

Given the following HTML:

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

You can take a JSON array with image data and do something like this:

var data = [
    'http://farm4.static.flickr./3594/3498411074_f10d546f42_t.jpg',
    'http://farm4.static.flickr./3364/3498396436_44bcdcc06f_t.jpg',
    'http://farm4.static.flickr./3436/3356022463_cd53a9b57d_t.jpg',
    'http://farm4.static.flickr./3422/3356840596_57f5da7842_t.jpg',
    'http://farm4.static.flickr./3180/2776515140_b7cd27cf7e_t.jpg',
    'http://farm4.static.flickr./3273/2758309734_48cfe16860_t.jpg',
    'http://farm4.static.flickr./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;
}

Note that 'data' can be replaced with actual data. I've given each image row a class of images-row. Using this CSS class you could apply whatever styles you want to each row and each image in the row.

Note also that this code kind of assumes images of the same width and height. The logic won't break if the images are different sizes, but the presentation will look a little funky (that's where the CSS could e in).

I don't guarantee this will work (i'm tired right now), but something like this should do the trick:

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