Sådan oprettes: Billedgitter

Lær, hvordan du opretter et billedgitter。

Billedgitter

Lær, hvordan du opretter en billedgalleri, hvor du kan skifte mellem fire, to eller fuld bredde billeder ved at klikke på knappen：

Prøv det selv

Opret et billedgitter

Første trin - Tilføj 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>

Andet trin - Tilføj CSS:

Opret layout med CSS Flexbox:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* Opret to ved siden af hinanden, ens kolonner */
.column {
  flex: 50%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}

Prøv det selv

Tredje trin - Tilføj JavaScript:

Opret en kontrollerbar rutenetvisning med JavaScript:

<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>
<script>
// Få elementer med class="column"
var elements = document.getElementsByClassName("column");
// Deklarere en "løkke" variabel
var i;
// Full bred billede
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}
// To ved siden af hinanden
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}
// Fire ved siden af hinanden
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}
</script>

Prøv det selv

Relaterede sider

Tilrettelæggelse:CSS Flexbox

Tilrettelæggelse:Hvordan oprette: Responsiv billedgitter