cdv8com网站画廊的代码

阅读量:511

新建一个页面，把下面的代码放在自定义代码里，下面加上评论即可。瀑布流的代码在下方。代码都是chatgpt写的：

<style>
.gallery-flow {
  display: flex;
  gap: 10px;
  height: 50vh; 
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.gallery-flow img {
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.gallery-flow img:hover {
  transform: scale(1.05);
}

/* 隐藏滚动条 */
.gallery-flow::-webkit-scrollbar {display:none;}

/* 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%;
}
.lightbox .arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: #fff; cursor: pointer;
  user-select: none;
}
.lightbox .arrow.left {left: 30px;}
.lightbox .arrow.right {right: 30px;}
</style>

<div class="gallery-flow" id="galleryFlow">
  <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" alt="图片1">
  <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" alt="图片2">
  <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" alt="图片3">
  <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" alt="图片4">
  <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" alt="图片5">
</div>

<!-- Lightbox -->
<div class="lightbox" id="lightbox">
  <span class="arrow left">&#10094;</span>
  <img src="" alt="大图">
  <span class="arrow right">&#10095;</span>
</div>

<script>
const gallery = document.getElementById('galleryFlow');
gallery.addEventListener('wheel', e => {
  e.preventDefault();
  gallery.scrollLeft += e.deltaY * 3; // ✅ 滚动速度 ×3
});

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;

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';
}

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.addEventListener('click', e=>{
  if(e.target===lightbox){
    lightbox.style.display='none';
  }
});
</script>

瀑布流的代码：

<style>
/* ✅ 外层容器，控制居中和左右留白 */
.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; }
</style>

<!-- ✅ 外层包一层，保证居中布局 -->
<div class="gallery-wrapper">
  <!-- ✅ 瀑布流画廊 -->
  <div class="gallery-flow" id="galleryFlow">
    <!-- ✅ 懒加载 loading="lazy" -->
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" 
         data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" alt="图片1" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" 
         data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" alt="图片2" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" 
         data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" alt="图片3" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" 
         data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" alt="图片4" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" 
         data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" alt="图片5" loading="lazy">
    <!-- 下面图片保持原样，只要加 loading="lazy" 即可 -->
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" alt="图片6" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" alt="图片7" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" alt="图片8" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" alt="图片9" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" alt="图片10" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01094.jpg" alt="图片11" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01083.jpg" alt="图片12" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00532.jpg" alt="图片13" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC00497.jpg" alt="图片14" loading="lazy">
    <img src="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" data-full="https://cdv8.com/wp-content/uploads/2025/07/DSC01027.jpg" alt="图片15" loading="lazy">
  </div>
</div>

<!-- Lightbox 弹窗 -->
<div class="lightbox" id="lightbox">
  <span class="arrow left">&#10094;</span>
  <img src="" alt="大图">
  <span class="arrow right">&#10095;</span>
</div>

<script>
/* 获取所有缩略图 */
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';
  }
});
</script>

近期文章

近期评论

cdv8com网站画廊的代码