Hoe OM - Beeldrooster
Leer hoe om 'n beeldrooster te skep.
Beeldrooster
Leer hoe om 'n prentgalery te skep wat wissel tussen vier, twee of volle wydte prente met 'n klik van 'n knoppie:
Skep 'n beeldrooster
Stap 1) Voeg HTML by:
Voorbeeld
<div class="row">
<div class="column">
<img
src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div
class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div
class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
Stap 2) Voeg CSS by:
Gebruik CSS Flexbox om die uitleg te skep:
Voorbeeld
.row {
display: flex;
flex-wrap: wrap;
padding:
0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}
.column
img {
margin-top: 8px;
vertical-align: middle;
}
Stap 3) Voeg JavaScript by:
Skep 'n beheerbare roosteraansig met JavaScript:
Voorbeeld
<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>
<script>
// Get the elements with class="column"
var elements =
document.getElementsByClassName("column");
// Declare a
"loop" variable
var i;
// Full-width images
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.flex = "100%";
}
}
// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.flex = "50%";
}
}
// Four images side by
side
function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.flex = "25%";
}
}
</script>
Wenk: Gaan na ons Responsiewe Beeldrooster-tutoriaal om te leer hoe om 'n responsiewe beeldrooster te skep, wat tussen kolomme verskil, afhangend van die skermgrootte.
Wenk: Gaan na ons CSS Flexbox-tutoriaal om meer te wete te kom oor die buigsame boks-uitlegmodule.