Gewusst wie: Bildraster
Erfahren Sie, wie Sie ein Bildraster erstellen.
Bildraster
Erfahren Sie, wie Sie mit einem Klick auf eine Schaltfläche eine Bildergalerie erstellen, die zwischen vier, zwei oder Bildern in voller Breite variiert:
Erstellen eines Bildrasters
Schritt 1) HTML hinzufügen:
Beispiel
<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>
Schritt 2) CSS hinzufügen:
Verwenden Sie CSS Flexbox, um das Layout zu erstellen:
Beispiel
.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;
}
Schritt 3) JavaScript hinzufügen:
Erstellen Sie eine steuerbare Rasteransicht mit JavaScript:
Beispiel
<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>
Tipp: Gehen Sie zu unserem Responsive Image Grid Tutorial , um zu erfahren, wie Sie ein responsives Image Grid erstellen, das je nach Bildschirmgröße zwischen den Spalten variiert.
Tipp: Besuchen Sie unser CSS-Flexbox-Tutorial , um mehr über das flexible Box-Layout-Modul zu erfahren.