在網(wǎng)頁(yè)設(shè)計(jì)中，圖片畫(huà)廊是一個(gè)重要的設(shè)計(jì)元素。當(dāng)用戶瀏覽網(wǎng)頁(yè)時(shí)，一個(gè)美觀的圖片畫(huà)廊可以讓用戶獲得更好的體驗(yàn)。純JS和CSS3實(shí)現(xiàn)圖片畫(huà)廊是一個(gè)很好的選擇，下面我們來(lái)了解一下這種實(shí)現(xiàn)方式。

HTML結(jié)構(gòu)：
<div class="gallery">
<ul>
<li><a href="#"><img src="1.jpg" alt="1"></a></li>
<li><a href="#"><img src="2.jpg" alt="2"></a></li>
<li><a href="#"><img src="3.jpg" alt="3"></a></li>
</ul>
</div>
CSS代碼：
.gallery ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
width: 100%;
}
.gallery li{
width: calc(33.3% - 10px);
margin-bottom: 20px;
position: relative;
}
.gallery li img{
width: 100%;
height: auto;
}
.gallery li a:before{
content: "";
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-color: #000;
transition: opacity .3s ease;
}
.gallery li a:hover:before{
opacity: .8;
}
.gallery li a img{
position: relative;
z-index: 1;
}
JS代碼：
var galleryItems = document.querySelectorAll('.gallery li a');
var galleryLength = galleryItems.length;
for(var i = 0; i < galleryLength; i++){
galleryItems[i].addEventListener('click', openLightbox);
}
function openLightbox(event){
event.preventDefault();
var imgSrc = this.querySelector('img').getAttribute('src');
var modal = document.createElement('div');
modal.className = 'lightbox-modal';
modal.innerHTML = '<img src="'+imgSrc+'">';
document.body.appendChild(modal);
modal.addEventListener('click', closeLightbox);
}
function closeLightbox(event){
event.preventDefault();
var modal = document.querySelector('.lightbox-modal');
modal.parentElement.removeChild(modal);
}

以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖片畫(huà)廊。在HTML中，我們使用<ul>和<li>標(biāo)簽創(chuàng)建畫(huà)廊的列表，每個(gè)列表項(xiàng)包含一個(gè)鏈接和一個(gè)圖片。在CSS中，我們使用了Flex布局和偽元素實(shí)現(xiàn)了鼠標(biāo)懸停時(shí)圖片的黑色遮罩效果。在JS中，我們對(duì)所有圖片鏈接添加了一個(gè)點(diǎn)擊事件，在點(diǎn)擊時(shí)創(chuàng)建了一個(gè)模態(tài)框，并在其中顯示對(duì)應(yīng)的圖片，同時(shí)對(duì)模態(tài)框添加了一個(gè)點(diǎn)擊事件，在點(diǎn)擊時(shí)關(guān)閉模態(tài)框。

這種純JS和CSS3實(shí)現(xiàn)方式不依賴(lài)于第三方庫(kù)和框架，可以輕松地把它集成到其他Web應(yīng)用程序中。同時(shí)，它還可以通過(guò)修改CSS樣式表來(lái)定制畫(huà)廊的風(fēng)格和布局，使它更符合我們的設(shè)計(jì)需求。