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
/* ****************************************************************************************** *
* 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]);
}
}
}
}