Cách tạo: Lưới hình ảnh

Học cách tạo lưới hình ảnh.

Lưới hình ảnh

Học cách tạo một thư viện hình ảnh, chỉ cần nhấp vào nút là có thể chuyển đổi giữa bốn hình ảnh, hai hình ảnh hoặc hình ảnh toàn diện:

thử trực tiếp

Tạo lưới hình ảnh

Bước 1 - Thêm 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>

Bước 2 - Thêm CSS:

sử dụng CSS Flexbox để tạo布局:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* Tạo hai cột song song bằng nhau */
.column {
  flex: 50%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}

thử trực tiếp

Bước 3 - Thêm JavaScript:

sử dụng JavaScript để tạo giao diện lưới điều khiển được:

<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>
<script>
// 获取 class="column" 的元素
var elements = document.getElementsByClassName("column");
// 声明一个“循环”变量
var i;
// 全宽图像
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}
// 两张并排的图片
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}
// 四张并排的图片
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}
</script>

thử trực tiếp

Trang liên quan

Hướng dẫn:CSS Flexbox

Hướng dẫn:Cách tạo lưới ảnh tương ứng