Jak tworzyć: Siatka obrazów

Poprzednia strona Responsywna siatka obrazów
Następna strona Biblioteka obrazów

Naucz się, jak utworzyć siatkę obrazów.

Siatka obrazów

Naucz się, jak utworzyć galerię obrazów, która pozwala przełączać się między czterema, dwoma lub pełnoekranowymi obrazami za pomocą jednego kliknięcia przycisku:

Spróbuj osobiście

Utwórz siatkę obrazów

Krok 1 - Dodaj HTML：

<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>

Krok 2 - Dodaj CSS:

Użyj CSS Flexbox do tworzenia układu:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* utwórz dwie równoległe kolumny */
.column {
  flex: 50%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}

Spróbuj osobiście

Krok 3 - Dodaj JavaScript:

Użyj JavaScript do tworzenia kontrolowanego widoku siatki:

<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>
<script>
// pobierz elementy z klasą "column"
var elements = document.getElementsByClassName("column");
// deklaracja zmiennej "pętla"
var i;
// obrazek pełnej szerokości
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}
// dwa obrazki w szeregu
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}
// cztery obrazki w szeregu
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}
</script>

Spróbuj osobiście