用html css js 做一个照片墙
时间: 2023-10-03 22:08:14 浏览: 11
好的,以下是一个简单的照片墙的 HTML、CSS 和 JavaScript 代码:
HTML 代码:
```
<div class="gallery">
<img src="img/photo1.jpg" alt="Photo 1">
<img src="img/photo2.jpg" alt="Photo 2">
<img src="img/photo3.jpg" alt="Photo 3">
<img src="img/photo4.jpg" alt="Photo 4">
<img src="img/photo5.jpg" alt="Photo 5">
<img src="img/photo6.jpg" alt="Photo 6">
<img src="img/photo7.jpg" alt="Photo 7">
<img src="img/photo8.jpg" alt="Photo 8">
</div>
```
CSS 代码:
```
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
margin: 20px;
}
.gallery img {
width: 100%;
height: auto;
object-fit: cover;
}
```
JavaScript 代码:
```
// 点击图片放大
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
image.classList.toggle('active');
});
});
```
这个照片墙使用了 CSS 栅格布局来自动排列图片,并使用了 JavaScript 来实现点击图片放大。你可以将图片路径替换为自己的图片,然后将 HTML、CSS 和 JavaScript 代码保存为相应的文件,然后就可以在浏览器中打开查看效果了。
阅读全文