Kolommen opmaak met PHP loop

Door Bryan De Baar op 19-02-2021 01:28

1.403 views

Goede avond,

Wie o wie kan mij op weg helpen.
Via een foreach loop word een array met categorieën uitgelezen.
Deze wil ik presenteren in een kolommen opmaak.

Als voorbeeld heb ik de volgende categorieën
- Boeken
- Films
- Muziek
- Kantoor
- Meubels
- Spellen

Ik wil 3 kolommen maken, die er dan als volgt uitzien

<div class="column-1">
    <span>Boeken</span>
    <span>Meubels</span>
</div>
<div class="column-2">
    <span>Films</span>
    <span>Muziek</span>
</div>
<div class="column-3">
    <span>Kantoor</span>
    <span>Spellen</span>
</div>

Ze worden dus op alfabetische volgorde verdeeld over de 3 kolommen.
Zelf dacht ik aan modulus te gebruiken maar hoe stel ik die kolommen hierop in?

- Ariën -

19-02-2021 05:26 gewijzigd op 19-02-2021 05:26

Je kan ook de flexbox gebruiken, zodat je de logica van het verdelen niet in PHP hoeft te benutten.

Onbekende gebruiker

19-02-2021 22:35 gewijzigd op 19-02-2021 22:35

Maar PHP is wel zo leuk, toch?

<?php
$categorie = ['Boeken', 'Films', 'Muziek', 'Kantoor', 'Meubels', 'Spellen'];
$einde = count($categorie) - 1;  // voor oneven kolommen
foreach ($categorie as $kolom => $naam) {
  if ($kolom % 2 == 0) {print '<div class="column-' . ((int) $kolom / 2 + 1) . '">' . PHP_EOL;}
  print '    <span>' . $naam . '</span>' . PHP_EOL;
  if ($kolom % 2 == 1 || $kolom == $einde) {print '</div>' . PHP_EOL;}
}
?>

Bryan De Baar

19-02-2021 23:18

@ad,

Thanks voor het meedenken. Jouw code heb ik geprobeerd maar dan word in kolom 1 de items 1 en 2 gezet en in kolom 2 de items 3 en 4 en in kolom 3 5 en 6.

Hieronder een schema wat ik zou willen
In kolom 1 zouden de items 1, 4, 7 etc moeten komen
In kolom 2 de items 2, 5, 8 etc
En kn kolom 3, 6, 9 etc

- Ariën -

20-02-2021 00:47 gewijzigd op 20-02-2021 00:48

Met de Flexbox kan dit eenvoudig met
flex-direction:row;
Maar column als waarde kan ook.

Onbekende gebruiker

20-02-2021 22:19 gewijzigd op 20-02-2021 22:23

O, zo:

<?php
$kolommen = 3;
$items = [];
for ($i = 1; $i < 10; $i++) {$items[] = 'Item ' . $i;}
$aantal = count($items);
for ($kolom = 0; $kolom < $kolommen; $kolom++) {
  print '<div class="column-' . ($kolom + 1) . '">' . PHP_EOL;
  for ($i = $kolom; $i < $aantal; $i += $kolommen) {
    print '    <span>' . $items[$i] . '</span>' . PHP_EOL;
  }
  print '</div>' . PHP_EOL;
}
?>

Nu is het aantal kolommen dynamisch via $kolommen.

Reageren

Inloggen om te reageren