Ein Array der Länge 9 soll zweizeilig nach folgendem Schema ausgegeben werden (angezeigt werden die Indizes des Arrays):
0 2 4 6 8
1 3 5 7
/* ****************************************************************************************** *
* 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'),
tmp = [],
count = 0,
rows;
// wrapper initialisieren
// 1. Anzahl Zeilen
rows = 2;
// 2. Ausgabe-Matrix erstellen
for(var c=0; c<files.length; c+=2){
// Neue Spalte in Matrix
tmp[count] = [];
// Spalte mit den Elementen des File-Arrays füllen
for(var r=0; r<rows; r++){
tmp[count][r] = files[c+r];
}
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]);
}
}
// Zeile umbrechen
wrapper.appendChild(document.createElement('br'));
}
}