<< zurück

Array nach Spalten aufsteigend ausgeben

Ein Array der Länge 9 soll nach folgendem Schema ausgegeben werden (angezeigt werden die Indizes des Arrays):

0   3   5   7
1 4 6 8
2

Beispiel

Script

/* ****************************************************************************************** *
 * Das Script kann frei verwendet werden, dieser Kommentar sowie die Nennung des Nicks
 * müssen jedoch erhalten bleiben.
 *
 *                                                               Quaese (www.quaese.de), 2014
 * ****************************************************************************************** */
var files = [
        {'name': 'eins.txt', 'date': '01.02.03', 'size': 100},
        {'name': 'zwei.txt', 'date': '29.02.03', 'size': 300},
        {'name': 'drei.txt', 'date': '12.02.03', 'size': 200},
        {'name': '4.txt', 'date': '29.02.03', 'size': 300},
        {'name': '5.txt', 'date': '12.02.03', 'size': 200},
        {'name': '6.txt', 'date': '29.02.03', 'size': 300},
        {'name': '7.txt', 'date': '12.02.03', 'size': 200},
        {'name': '8.txt', 'date': '29.02.03', 'size': 300},
        {'name': '9.txt', 'date': '12.02.03', 'size': 200},
        {'name': '10.txt', 'date': '29.02.03', 'size': 300},
        {'name': '11.txt', 'date': '12.02.03', 'size': 200},
        {'name': '12.txt', 'date': '29.02.03', 'size': 300},
        {'name': '13.txt', 'date': '12.02.03', 'size': 200},
        {'name': '14.txt', 'date': '29.02.03', 'size': 300},
        {'name': '15.txt', 'date': '12.02.03', 'size': 200},
        {'name': '16.txt', 'date': '29.02.03', 'size': 300},
        {'name': '17.txt', 'date': '12.02.03', 'size': 200},
        {'name': '18.txt', 'date': '29.02.03', 'size': 300},
        {'name': '19.txt', 'date': '12.02.03', 'size': 200},
        {'name': '20.txt', 'date': '29.02.03', 'size': 300},
        {'name': '21.txt', 'date': '12.02.03', 'size': 200},
        {'name': '22.txt', 'date': '29.02.03', 'size': 300},
        {'name': '23.txt', 'date': '12.02.03', 'size': 200},
        {'name': '24.txt', 'date': '29.02.03', 'size': 300},
        {'name': '25.txt', 'date': '12.02.03', 'size': 200}
    ],
    insertDiv = function(wrapper, file){
        // neues Element erstellen
        var div = document.createElement('div'),
            content = "",
            _key;

        for(_key in file){
            if(file.hasOwnProperty(_key)){
                content += _key + ": " + file[_key] + "<br />";
            }
        }

        // dem neuen Element Inhalt zuweisen
        div.innerHTML = content;
        // CSS-Eigenschaften über das style-Objekt (z.b. inline-block)
        div.style.display = "inline-block";
        // CSS über Klasse zuweisen
        div.className += " metro-div";
        wrapper.appendChild(div);
    };

window.onload = function(){
    var wrapper = document.getElementById('wrapper'),
        dim = {
            wrapperWidth: wrapper.offsetWidth,
            divWidth: 152 // aus CSS-Klasse .metro-div: 110 + 2*10 + 2*10 + 2*1 = 152
        },
        tmp = [],
        count = 0,
        cols, rows, elems, delta;

    // wrapper initialisieren
    // 1. Anzahl Spalten
    cols = Math.floor(dim.wrapperWidth / dim.divWidth);
    // 2. Anzahl Zeilen
    rows = Math.ceil(files.length / cols);
    // 3. Anzahl Elemente in letzter Zeile
    elems = files.length % cols;

    console.log("cols: ", cols, ", rows: ", rows, ", elems:", elems);
    // 4. Ausgabe-Matrix erstellen
    // Über Spalten
    for(var c=0; c<cols; c++){
        // Anzahl Elemente in den Spalten der Matrix, in denen die letzte Zeile gefüllt ist
        delta = (c<elems || elems===0)? rows : rows-1;
        // Neue Spalte in Matrix
        tmp[c] = [];

        // Spalte mit den Elementen des File-Arrays füllen
        for(var r=0; r<delta; r++){
            tmp[c][r] = files[count];
            count++;
        }
    }

    // Über die Matrix iterieren
    for(var i=0; i<rows; i++){
        for(var j=0; j<tmp.length; j++){
            if(tmp[j][i]){
                insertDiv(wrapper, tmp[j][i]);
            }
        }
    }
}
© 2014 Quaese