css制作画廊

CSS制作画廊的方法

使用CSS可以创建多种风格的艺术画廊或图片展示效果。以下是几种常见实现方式：

基础网格布局

利用CSS Grid创建均匀排列的图片网格：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
}
.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s;
}
.gallery img:hover {
  transform: scale(1.05);
}

瀑布流布局

实现Pinterest风格的瀑布流效果：

.masonry {
  column-count: 4;
  column-gap: 1em;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1em;
}
.masonry img {
  width: 100%;
  display: block;
  border-radius: 4px;
}
@media (max-width: 768px) {
  .masonry {
    column-count: 2;
  }
}

交互式灯箱效果

配合JavaScript实现点击放大功能：

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox img {
  max-height: 80vh;
  max-width: 80vw;
}
.lightbox.active {
  display: flex;
}

响应式设计要点

确保画廊在不同设备上正常显示：

/* 移动端适配 */
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 平板设备适配 */
@media (min-width: 601px) and (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

动画增强效果

添加悬停动画提升用户体验：

.gallery-item {
  position: relative;
  overflow: hidden;
}
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  transform: translateY(100%);
  transition: transform 0.3s;
}
.gallery-item:hover .gallery-caption {
  transform: translateY(0);
}

实际应用时，这些CSS代码需要配合相应的HTML结构。现代CSS特性如aspect-ratio可以更好地控制图片容器比例，CSS Scroll Snap可以实现画廊滑动效果。根据项目需求，可以选择纯CSS方案或结合JavaScript实现更复杂的交互功能。