Javascript Loop строки и столбцы

Question

Хорошо, у меня есть файл JSON с URL-адресами из 15 изображений. То, что я пытаюсь достичь, это что-то вроде ...

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

Так что у меня есть 3 столбца и 5 строк изображений. Я знаю, что должен пройтись по изображениям, чтобы получить их, но как мне построить их в ряды, чтобы в каждой строке было 3 изображения. Я использую простой JavaScript, а не JQuery или любой другой фреймворк. Помощь будет очень признателен.

Answer 1

Редактировать: После перечитывания вопроса и некоторых комментариев я считаю, что ОП хочет, чтобы изображения отображались в 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 может прийти).

Answer 2

Я не гарантирую, что это сработает (я устал сейчас), но что-то вроде этого должно сработать:

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