在網(wǎng)頁設(shè)計中，圖片畫廊是一個重要的設(shè)計元素。當(dāng)用戶瀏覽網(wǎng)頁時，一個美觀的圖片畫廊可以讓用戶獲得更好的體驗。純JS和CSS3實現(xiàn)圖片畫廊是一個很好的選擇，下面我們來了解一下這種實現(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);
}

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

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