画廊-巴丹吉林一组

/* ✅ 外层容器，控制居中和左右留白 */
.gallery-wrapper {
max-width: 1400px; /* 画廊最大宽度，可调大到1600 */
margin: 0 auto; /* 居中 */
padding: 20px; /* 上下左右留白 */
}


/* ✅ 瀑布流容器 */
.gallery-flow {
column-count: 3; /* PC端默认3列 */
column-gap: 15px; /* 列间距 */
width: 100%;
}


/* 每张图片样式 */
.gallery-flow img {
width: 100%;
margin-bottom: 15px;
border-radius: 6px;
display: inline-block;
cursor: zoom-in;
transition: transform 0.3s ease;
background: #f3f3f3; /* 懒加载前有个灰底防止闪白 */
}


/* 悬停微放大 */
.gallery-flow img:hover {
transform: scale(1.03);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}


/* ✅ 响应式自适应列数 */
@media (max-width: 1400px) {
.gallery-flow { column-count: 3; }
}
@media (max-width: 1024px) {
.gallery-flow { column-count: 2; }
}
@media (max-width: 768px) {
.gallery-flow { column-count: 1; }
}


/* Lightbox 弹窗层 */
.lightbox {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top:0; left:0; width:100%; height:100%;
background: rgba(0,0,0,0.9);
z-index: 99999;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
}


/* Lightbox 左右箭头 */
.lightbox .arrow {
position: absolute; top: 50%;
transform: translateY(-50%);
font-size: 50px;
color: #fff; cursor: pointer;
user-select: none;
opacity: 0.8;
}
.lightbox .arrow.left { left: 30px; }
.lightbox .arrow.right { right: 30px; }
.lightbox .arrow:hover { opacity: 1; }


data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" alt="图片1" loading="lazy">
data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" alt="图片2" loading="lazy">
data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" alt="图片3" loading="lazy">
data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" alt="图片4" loading="lazy">
data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" alt="图片5" loading="lazy">


❮
❯


/* 获取所有缩略图 */
const imgs = Array.from(document.querySelectorAll('.gallery-flow img'));
const lightbox = document.getElementById('lightbox');
const lightboxImg = lightbox.querySelector('img');
const leftArrow = lightbox.querySelector('.arrow.left');
const rightArrow = lightbox.querySelector('.arrow.right');
let currentIndex = 0;


/* 点击缩略图 → 打开 Lightbox */
imgs.forEach((img, i)=>{
img.addEventListener('click', ()=>{
currentIndex = i;
showLightbox(currentIndex);
});
});


/* 显示大图 */
function showLightbox(idx){
lightboxImg.src = imgs[idx].dataset.full || imgs[idx].src;
lightbox.style.display='flex';
}


/* Lightbox 左右切换 */
leftArrow.addEventListener('click', e=>{
e.stopPropagation();
currentIndex = (currentIndex-1+imgs.length)%imgs.length;
showLightbox(currentIndex);
});
rightArrow.addEventListener('click', e=>{
e.stopPropagation();
currentIndex = (currentIndex+1)%imgs.length;
showLightbox(currentIndex);
});


/* 点击背景关闭 Lightbox */
lightbox.addEventListener('click', e=>{
if(e.target===lightbox){
lightbox.style.display='none';
}
});