Kolommen opmaak met PHP loop

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bryan De Baar

Bryan De Baar

19/02/2021 01:28:39
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<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?
 
PHP hulp

PHP hulp

19/03/2024 07:48:38
 
- Ariën  -
Beheerder

- Ariën -

19/02/2021 05:26:18
Quote Anchor link
Je kan ook de flexbox gebruiken, zodat je de logica van het verdelen niet in PHP hoeft te benutten.
Gewijzigd op 19/02/2021 05:26:42 door - Ariën -
 
Ad Fundum

Ad Fundum

19/02/2021 22:35:04
Quote Anchor link
Maar PHP is wel zo leuk, toch?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?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;}
}

?>
Gewijzigd op 19/02/2021 22:35:32 door Ad Fundum
 
Bryan De Baar

Bryan De Baar

19/02/2021 23:18:30
Quote Anchor link
@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  -
Beheerder

- Ariën -

20/02/2021 00:47:31
Quote Anchor link
Met de Flexbox kan dit eenvoudig met
flex-direction:row;
Maar column als waarde kan ook.
Gewijzigd op 20/02/2021 00:48:56 door - Ariën -
 
Ad Fundum

Ad Fundum

20/02/2021 22:19:41
Quote Anchor link
O, zo:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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.
Gewijzigd op 20/02/2021 22:23:23 door Ad Fundum
 



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.