帮我写照片墙代码
时间: 2023-07-10 07:16:57 浏览: 58
好的,以下是一个简单的照片墙实现代码示例,供您参考:
HTML代码:
```
<div class="photo-wall">
<img src="image-1.jpg" alt="Photo 1">
<img src="image-2.jpg" alt="Photo 2">
<img src="image-3.jpg" alt="Photo 3">
<img src="image-4.jpg" alt="Photo 4">
<img src="image-5.jpg" alt="Photo 5">
<img src="image-6.jpg" alt="Photo 6">
</div>
```
CSS代码:
```
.photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.photo-wall img {
width: 200px;
height: 200px;
margin-bottom: 20px;
object-fit: cover;
border: 2px solid #fff;
border-radius: 5px;
}
```
JavaScript代码:
```
$('.photo-wall').masonry({
itemSelector: '.photo-wall img',
columnWidth: 200,
gutter: 20
});
```
这段代码使用了 jQuery 插件 masonry,它可以实现照片墙的布局效果。需要注意的是,使用该插件需要先引入 jQuery 和 masonry 的 JavaScript 文件。
希望这个示例代码可以帮助到您。