Probleem met items en kolommen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Front-end Developer Vue.js Meewerkend voorman

Functieomschrijving Ben jij een ervaren Front-end Developer, bedreven in Vue.js en lijkt het jou gaaf om als meewerkend voorman verantwoordelijk te zijn voor de ontwikkeling van drie junior ontwikkelaars? Werk jij graag aan diverse projecten t.b.v. het vergroten van klant- en medewerkerbeleving? Lee dan snel verder! Het onderhouden, ontwikkelen en testen van front-end software van diverse klant- en medewerkersapplicaties; Het ontwikkelen van maatwerk front-end oplossingen in Vue.js en participeren in een scrumteam; Verantwoordelijk voor het begeleiden en coachen van drie junior front-end developers; Verantwoordelijk voor code-reviews en het opstellen van de juiste documentatie zoals userstories en api ontwerp; Participeren in

Bekijk vacature »

Jan Koehoorn

Jan Koehoorn

02/08/2012 20:58:50
Quote Anchor link
Ik had vandaag op mijn werk een programmeerprobleem waarvoor ik intussen ook een oplossing heb. Maar ik ben toch nieuwsgierig of het misschien nog slimmer kan, daarom post ik hem hier.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
        }
    }

?>
Gewijzigd op 02/08/2012 21:01:39 door Jan Koehoorn
 
PHP hulp

PHP hulp

03/08/2020 10:41:32
 
Erwin H

Erwin H

02/08/2012 22:49:19
Quote Anchor link
Als ik twee aannames mag maken:
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.
 
Jan Koehoorn

Jan Koehoorn

02/08/2012 22:55:53
Quote Anchor link
Aanname 1 en 2 kloppen. Maar ik ben benieuwd naar de implementatie.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

03/08/2012 07:05:49
Quote Anchor link
Zoiets?:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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];
}

?>
 
Erwin H

Erwin H

03/08/2012 08:46:56
Quote Anchor link
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.
 
Eddy E

Eddy E

03/08/2012 08:56:45
Quote Anchor link
Werkt dit niet? ... kolommen in CSS ?
CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
div.drie_kolommen
   {
   column-count: 3;  
   column-gap: 20px;
   }


PHP
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';
?>



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
 
Jan Koehoorn

Jan Koehoorn

03/08/2012 10:50:58
Quote Anchor link
@ Eddy: de CSS3 oplossing had ik natuurlijk ook al bekeken. Maar die werkt helaas nog niet crossbrowser.
@ 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.
 
Erwin H

Erwin H

03/08/2012 11:25:52
Quote Anchor link
Ja, ik heb je eerste post gelezen (waar denk je anders dat ik op reageer...).

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.