Probleem met items en kolommen
1) Je krijgt een aantal items, die je over drie kolommen moet verdelen. De hoogte van de kolommen is variabel.
2) Je weet van tevoren niet hoeveel items er zijn.
3) De items kunnen verschillende hoogtes hebben. De hoogtes kunnen de waarde 1 t/m 10 hebben, maar de waarde 1 zal vaker voorkomen dan andere waardes.
4) De drie kolommen moeten ongeveer even hoog worden
5) De volgorde van de items mag niet veranderen
Uitleg punt 5)
Het kan dus bijvoorbeeld zo zijn:
kolom 1: item1 - item2 - item3 - item4
kolom 2: item5 - item6
kolom 3: item7 - item8
Het algoritme moet dus beginnen met stapelen in kolom 1 en zelf beslissen wanneer de overstap naar kolom 2 en later naar kolom 3 gemaakt wordt.
6) Kolom 3 mag niet de langste kolom zijn.
Het script moet zo beginnen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$items = array ( ); // de array met items
$n = 100; // dit moet ook een ander aantal items kunnen worden
$num_cols = 3; // het aantal kolommen
for ( $i = 0; $i < $n; $i++ ) {
// alleen bij de waarde 0 krijgt het item een andere lengte dan 1
if ( !mt_rand ( 0, 2 ) ) {
$items[ $i ] = mt_rand ( 2, 10 );
}
else {
$items[ $i ] = 1;
}
}
?>
$items = array ( ); // de array met items
$n = 100; // dit moet ook een ander aantal items kunnen worden
$num_cols = 3; // het aantal kolommen
for ( $i = 0; $i < $n; $i++ ) {
// alleen bij de waarde 0 krijgt het item een andere lengte dan 1
if ( !mt_rand ( 0, 2 ) ) {
$items[ $i ] = mt_rand ( 2, 10 );
}
else {
$items[ $i ] = 1;
}
}
?>
Gewijzigd op 02/08/2012 21:01:39 door Jan Koehoorn
1 - voor je de kolommen in gaat delen kan je wel de hoogtes van de items bepalen (dus niet bij het schrijven van het script, maar wel bij het uitvoeren ervan)
2 - kolom 2 mag hoger worden dan kolom 1, maar 3 mag niet de hoogste zijn.
Dan zou ik het zo doen:
stap 1: bepaal de hoogte van alle items (dus de som van alle hoogtes)
stap 2: bepaal voor kolom 1 de minimale hoogte als totaal/3
stap 3: plaats items in kolom 1 totdat je over het minimum heen bent
stap 4: bepaal de minimale hoogte voor kolom 2 als (totaal - geplaatst)/2
stap 5: plaats items in kolom 2 totdat je over het minimum heen bent
stap 6: plaats de rest in kolom 3
Als je het slim doet kan je stappen 2/3 en 4/5 natuurlijk in eenzelfde routine plaatsen zodat je het zelfs eenvoudig kunt uitbreiden naar meer kolommen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
$remainder = $totalheight;
$pointer = 0;
$sub = 0;
$colsar = array('column1' => 0, 'column2' => 0, 'column3' => 0);
//de eerste kolom
while ($sub < $remainder / 2) {
$sub += $items[$pointer];
$colsar['column1'] += $items[$pointer];
$remainder -= $items[$pointer];
$pointer++;
}
//reset het subtotaal
$sub = 0;
// de tweede kolom
while ($sub < $remainder) {
$sub += $items[$pointer];
$colsar['column2'] += $items[$pointer];
$remainder -= $items[$pointer];
$pointer++;
}
//de laatste kolom
for ($i=$pointer; $i<$n; $i++) {
$colsar['column3'] += $items[$i];
}
?>
$remainder = $totalheight;
$pointer = 0;
$sub = 0;
$colsar = array('column1' => 0, 'column2' => 0, 'column3' => 0);
//de eerste kolom
while ($sub < $remainder / 2) {
$sub += $items[$pointer];
$colsar['column1'] += $items[$pointer];
$remainder -= $items[$pointer];
$pointer++;
}
//reset het subtotaal
$sub = 0;
// de tweede kolom
while ($sub < $remainder) {
$sub += $items[$pointer];
$colsar['column2'] += $items[$pointer];
$remainder -= $items[$pointer];
$pointer++;
}
//de laatste kolom
for ($i=$pointer; $i<$n; $i++) {
$colsar['column3'] += $items[$i];
}
?>
Jan Koehoorn op 02/08/2012 22:55:53:
Aanname 1 en 2 kloppen. Maar ik ben benieuwd naar de implementatie.
Wat let je om het eens te proberen. Implementatie is reuze simpel.
CSS:
Code (php)
1
2
3
4
5
2
3
4
5
div.drie_kolommen
{
column-count: 3;
column-gap: 20px;
}
{
column-count: 3;
column-gap: 20px;
}
PHP
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
echo '<div class="drie_kolommen">';
while($row = mysql_fetch_assoc($res))
{
echo '<p>'. $row['tekst'] . '</p>';
}
echo '</div>';
?>
echo '<div class="drie_kolommen">';
while($row = mysql_fetch_assoc($res))
{
echo '<p>'. $row['tekst'] . '</p>';
}
echo '</div>';
?>
Zie ook: http://jsfiddle.net/XxxkJ/1/
Wellicht werkt het met afbeeldingen ook...
Toevoeging op 03/08/2012 09:04:05:
Met plaatjes (items...) werkt het ook: http://jsfiddle.net/XxxkJ/2/
Wat voor ITEMs zijn het?
Gewijzigd op 03/08/2012 09:04:59 door Eddy E
@ Erwin H: "Wat let je om het eens te proberen. Implementatie is reuze simpel." Heb je mijn eerste post niet gelezen? Ik ben benieuwd of er andere oplossingen zijn.
Quote:
Het algoritme moet dus beginnen met stapelen in kolom 1 en zelf beslissen wanneer de overstap naar kolom 2 en later naar kolom 3 gemaakt wordt.
En dat algoritme heb ik je gegeven. De implementatie ervan is simpel en kan je zelf zo doen als je mijn algoritme goed doorleest.