fotomuur met JS

Een fotomuur

Een oefening om afbeeldingen van verschillend formaat zonder 'gaten' weer te geven.

De strategie bestaat er uit afbeeldingen in een rij-element toe te voegen.
Vervolgens controleer je of de gewesnte breedte is overschreden.
In dat geval zet je de volgende afbeelding in een nieuwe rij en schaal de te grote rij totdat hij past.

Leerdoelen

DOM manipulatie met JS;
array-bewerking;
functies op elkaar afstemmen;
eenvoudige flexbox toepassing.

maak er geen typecursus van:

werk met eigen namen voor variabelen en functies;
voeg zelf relevant commentaar toe.

Metselen in JavaScript 1: afbeeldingen plaatsen (00:10:52)

Het is met JS mogelijk om afbeeldingen van verschillend formaat zonder openingen te rangschikken.
Je ziet hier het resultaat en het plan.
De basis wordt geplaatst en de afbeeldingen in de pagina geladen met JS.
Er is een array met de bestandsnamen.
Via document.createElement() worden de elementen gemaakt, van een passende url en alt-tekst voorzien en aan de DOM toegevoegd: appendChild().
Nadat de eerste uit de array is toegevoegd, wordt de volgende geladen. Deze strategie is hier beter dan een for-lus, omdat verderop voor een correct verloop gewacht moet worden tot een afbeelding is geladen, voordat het script verder kan worden afgewerkt.

Metselen in JavaScript 2: plaatjes willekeurig wisselen (00:06:57)

Voor testdoeleinden wordt de hoogte van de afbeelding in CSS verkleind. Later gaat dat via JS.
Ook willen we de volgorde van het laden aanpassen. Dit kan door de array door elkaar te schudden.
In deze functie wordt in een while-lus een willekeurig element gekozen en verwijderd uit de array en aan een lege array toegevoegd.

Willekeurig heel getal: Math.floor(Math.random) * aantal elementen in de array).
Eén element uit array halen: array.splice(getal, aantal volgende);
Aan array toevoegen: push();

Omdat alles in een functie zit, kun je hem direct op de url’s loslaten om deze in een andere volgorde op de pagina te plaatsen.

Metselen in JavaScript 3: afbeeldingen in een rij-element (00:09:02)

Het plan is om de afbeeldingen in verschillende rijen te plaatsen.
Hier wordt getoond hoe je een rij maakt. Daarvoor maken we een functie, zodat deze bij herhaling kan worden aangeroepen.
Hierin werken we opnieuw met document.createElement(). Het element krijgt een class mee met element.className. vervolgens passen we het script zo aan dat de rij in het document komt en de afbeeldingen in de gemaakte rij. Ook maken we een functie die de rij uit de DOM selecteert en die in een variable stopt.

Metselen in JavaScript 4: Over meerdere rijen verdelen (00:10:32)

In het plan moeten de afbeeldingen in meerdere rijen komen. Als een rij vol is krijgt hij een andere class-naam. Om het in beeld te houden krijgen de te volle rijen een te kleine hoogte zodat ze in beeld blijven.

Het script moet beslissen of de gewenste breedte is overschreden. Daarvoor moet eerst gewacht worden op het load-event van de afbeelding. Pas dan kan immers de breedte van de afbeelding door JS worden vastgesteld. In een variabele wordt bijgehouden hoeveel breedte de afbeeldingen in de rij samen hebben. Wordt de gewenste breedte overschreden (if-statement) dan wordt:

de class-naam van ‘rij’ omgezet naar ‘klaar’
de variabele gereset
een nieuwe rij gemaakt met de class-naam rij. Daar komen dan de nieuwe afbeeldingen in.

In de stijl heeft een rij die vol is de eigenschap display:flex. Hierdoor zal de rij nooit afbreken omdat deze te groot is. Voorlopig maken we met CSS de hoogte wat extra klein om de rij te kunnen overzien.
De afbeeldingen in die rij krijgen een hoogte van 100%.

Metselen in JavaScript 5: rij schalen (00:08:38)

De rij is dus te breed, zeker als we de hoogte in de CSS weghalen.
We stoppen de uitgangshoogte als constante in een scriptvariabele.
Een functie kan de gewenste hoogte berekenen uit de werkelijke en de gewenste breedte.
Deze waarde wordt met element.style.height aan de rij gegeven. Omdat de rij hoogte verliest, wordt hij ook minder breed.
Vergeet de eenheid in pixels niet.

Metselen in JavaScript 6: meer afbeeldingen (00:02:35)

Als je het script goed structureert kun je het makkelijk aan een click-event koppelen. Het hele proces kan zich dan herhalen als er op de ‘meer-knop’ wordt geklikt.
In dat geval moet er:

de array met Url’s weer worden gewisseld
de teller weer op 0 gezet worden
de eerste afbeelding weer worden opgeroepen, deze triggert dan de rest.

Metselen in JavaScript 7: marges zijn de voegen in de muur (00:04:11)

Een gemetselde muur heeft voegen. In dit geval zet je marges tussen de afbeeldingen en de rijen.
In de CSS doe je dat met margin.
Maar de rijbreedte neemt daar ook mee toe. Die moet je dus in je script verwerken. Door bij de berekening van de bereikte breedte met de afbeeldingsbreedte kun je ook 2 keer de marge toevoegen. Dit gaat het netste door die marge als constante in de variabelen op te nemen.

Inleveren

Na afloop plaats je deze training online.
Valideer jouw document op Markup Validation Service van W3C.
Plaats daarvoor de validatie icoontjes in de footer.
De code hiervoor vind je bijvoorbeeld hier.
Plaats de link in ELO Magister.