CÁCH THỨC - 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 thay đổi giữa bốn, hai hoặc hình ảnh toàn chiều rộng chỉ bằng một lần nhấp vào nút:
Tạo lưới hình ảnh
Bước 1) Thêm HTML:
Thí 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:
Thí 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;
}
Bước 3) Thêm JavaScript:
Tạo chế độ xem lưới có thể điều khiển bằng JavaScript:
Thí 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>
Mẹo: Đi tới Hướng dẫn về lưới hình ảnh đáp ứng của chúng tôi để tìm hiểu cách tạo lưới hình ảnh đáp ứng, 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: Đi tới 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.