css照片墙制作
基础布局与样式
使用CSS Grid或Flexbox创建照片墙的基础布局。Grid适合规整的排列，Flexbox适合灵活的自适应布局。以下以Grid为例：
.photo-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
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);
}图片自适应处理
确保图片在不同容器尺寸下保持比例且居中显示：
.photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}悬停效果增强
添加悬停时的文字说明层：
.photo-item {
position: relative;
}
.photo-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;
}
.photo-item:hover .photo-caption {
transform: translateY(0);
}响应式调整
针对不同屏幕尺寸调整列数和间距：
@media (max-width: 768px) {
.photo-wall {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
}
@media (max-width: 480px) {
.photo-wall {
grid-template-columns: 1fr 1fr;
}
}高级动画效果
实现加载时的交错动画：
.photo-item {
opacity: 0;
animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* 为每个项目添加延迟 */
.photo-item:nth-child(1) { animation-delay: 0.1s; }
.photo-item:nth-child(2) { animation-delay: 0.2s; }
/* 继续添加更多延迟规则... */masonry布局实现
如需瀑布流布局，可添加以下JavaScript辅助：
// 使用第三方库如Masonry.js
import Masonry from 'masonry-layout';
new Masonry('.photo-wall', {
itemSelector: '.photo-item',
columnWidth: 200,
gutter: 15
});滤镜效果
为照片添加CSS滤镜增强视觉：
.photo-item img {
filter: brightness(0.95);
transition: filter 0.3s;
}
.photo-item:hover img {
filter: brightness(1.1) contrast(1.05);
}
