[html/js] verdelen over 'kolommen'

[r0bert]

Ik heb een pagina gemaakt, werkt al bijna helemaal , waarbij divjes naar het startpagina idee aangemaakt worden. Maar nu wil ik graag dat dat liefst 3 kolommen worden, en die ongeveer even lang worden. M.a.w. de divjes moeten als het ware over 3 kolommen verdeeld worden.

voorbeeldje staat hier

Weet iemand hoe ik dat het beste aan kan pakken ?

Ps. de divjes zijn niet allemaal even lang.

[crisp]

Ik krijg hier een foutmelding met IE5.0:
Line 198: Could not get the cursor property. Invalid argument.

Maar anyway, is wel een leuke uitdaging ja om daar een mooi algoritme voor te verzinnen. Ik zal er eens over nadenken...

[r0bert]

Heb de pagina alleen nog maar compatible gemaakt met IE 6.0 dus zou heel goed kunnen..

Ik had trouwens wel in tussentijd zoiets bedacht:

Ik heb alle gegevens die in de divjes komen opgeslagen in de array aGegevens. Dus het aantal gegevens dat ingevult gaat worden weet ik dus al. Als ik dat aantal dan deel door 3 heb ik een gelijke verdeling. Vervolgens moet ik alleen nog in het scriptje bouwen dat een catagorie (lees: divje) niet halverwege afgebroken wordt om dat het op 1/3 van de gegevens zit.

Weet niet of dat gaat lukken, maar het is in ieder geval alvast een ideetje

[crisp]

Ik heb het volgende bedacht:

Ga je divjes in volgorde van grootte af, en begin met de grootste.
Die plaats je in kolom 1, de op een na grootste in kolom 2 en de daaropvolgende in kolom 3.
Vervolgens ga je de rest van de divjes af, en die plaats je telkens in de kolom waar zeg maar nog de meeste ruimte is.
Dit zal op het eind een aardige verdeling geven, echter staan dan de grote divs altijd bovenaan, en de kleine onderaan. Dit kan je oplossen door binnen een kolom de divs volgens een bepaald patroon te herverdelen.

[Verwijderd]

code:

/* pseudo-code */
var h = 0;
for(al je divjes) {
    h += divje.height;
}
// nu heb je de totale hoogte
var h2 = 0;
var kolom = 0;
for(al je divjes) {
    divje.moveTo(kolom, h2);
    h2 += divje.height;
    if(h2 > (h / 3)) {
        h2 = 0; // terug naar af
        kolom++; // volgende kolom
    }
}

[crisp]

Op donderdag 28 februari 2002 16:54 schreef Blues het volgende:

code:

/* pseudo-code */
var h = 0;
for(al je divjes) {
    h += divje.height;
}
// nu heb je de totale hoogte
var h2 = 0;
var kolom = 0;
for(al je divjes) {
    divje.moveTo(kolom, h2);
    h2 += divje.height;
    if(h2 > (h / 3)) {
        h2 = 0; // terug naar af
        kolom++; // volgende kolom
    }
}

ik zou er dit van maken:

code:

/* pseudo-code */
divjes.sort(byheight, descending);
var kolommen = new Array(3);
var divbykolom = new Array(3);
for (var i = 0; i < kolommen.length; i++) {
  kolommen[i] = 0;
  divbykolom[i] = new Array();
}
for (var i = 0; i < divjes.length; i++) {
  var kolom = kollomen.getmin(); // welke kolom heeft de kleinste waarde
  kolommen[kolom] += divjes[i].height;
  divbykolom[kolom][divbykolom[kolom].length] = i;
}

[r0bert]

Ok.. heb nu wel wat ideetjes.

Er is alleen 1 probleempje met de bovenstaande scriptjes. De divjes moeten in een bepaalde volgorde komen te staan. Zo is er een divje voor 'a' en een divje voor 'b', en dus moeten 'a' en 'b' elkaar op een logische volgorde opvolgen (bijvoorbeeld 'b' komt onder 'a'). Zelfde moet gebeuren met de volgende div 'c'.

Maar ik denk dat ik er wel uit ga komen. Dank U..