css制作照片墙

使用 CSS Grid 布局制作照片墙

通过 CSS Grid 可以快速创建响应式照片墙布局。定义网格容器并设置行列间距，子项自动填充。

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 15px;
  padding: 20px;
}
.photo-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.photo-item:hover {
  transform: scale(1.05);
}

使用 Flexbox 实现瀑布流效果

Flexbox 结合 column-count 属性可实现瀑布流布局，适合不同高度的图片展示。

.photo-wall {
  column-count: 4;
  column-gap: 15px;
}
.photo-item {
  break-inside: avoid;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .photo-wall { column-count: 2; }
}

添加悬停动画效果

通过 transform 和 transition 为照片墙添加交互效果，提升用户体验。

.photo-item {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-item:hover {
  transform: translateY(-5px) rotate(2deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  z-index: 10;
}

响应式设计处理

使用媒体查询确保照片墙在不同设备上正常显示，调整列数和间距。

.photo-wall {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .photo-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .photo-wall { grid-template-columns: 1fr; }
}

图片加载优化技巧

通过 object-fit 属性确保图片显示比例正确，避免变形。

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}
.photo-item img.lazy {
  opacity: 0;
}

完整实现时，HTML 结构只需简单的容器和图片元素：

<div class="photo-wall">
  <div class="photo-item">
    <img src="photo1.jpg" alt="Photo">
  </div>
  <!-- 更多图片项 -->
</div>

这些方法可以根据实际需求组合使用，通过调整网格参数、动画效果和响应式断点，创建出各种风格的照片墙效果。