Cách thực hiện - Lưới hình ảnh
Tìm hiểu cách tạo Lưới hình ảnh.
Lưới hình ảnh
Tìm hiểu cách tạo thư viện hình ảnh khác nhau giữa bốn, hai hoặc hình ảnh có chiều rộng đầy đủ chỉ bằng một cú nhấp chuột:
Tạo lưới hình ảnh
Bước 1) Thêm HTML:
Ví dụ
<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 bố cục:
Ví dụ
.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;
}
Hãy tự mình thử » Bước 3) Thêm JavaScript:
Tạo Chế độ xem lưới có thể kiểm soát bằng JavaScript:
Ví dụ
<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>
Hãy tự mình thử »Mẹo: Đi tới Hướng dẫn về lưới hình ảnh phản hồi của chúng tôi để tìm hiểu cách tạo lưới hình ảnh phản hồi, lưới này khác nhau giữa các cột, tùy thuộc vào kích thước màn hình.
Mẹo: Hãy truy cập Hướng dẫn CSS Flexbox của chúng tôi để tìm hiểu thêm về mô-đun bố cục hộp linh hoạt.