css+js+实现分类相册

<div id="gallery">
    <div class="category" id="nature">
        <h2>自然</h2>
        <div class="photos"></div>
    </div>
    <div class="category" id="city">
        <h2>城市</h2>
        <div class="photos"></div>
    </div>
    <!-- 其他类别 -->
</div>

#gallery {
    display: flex;
    flex-wrap: wrap;
}

.category {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}

.photos img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 5px;
}

const photosData = [
    { category: 'nature', url: 'path/to/nature1.jpg' },
    { category: 'city', url: 'path/to/city1.jpg' },
    // 更多照片数据
];

function renderPhotos() {
    photosData.forEach(photo => {
        const categoryDiv = document.querySelector(`#${photo.category} .photos`);
        const img = document.createElement('img');
        img.src = photo.url;
        categoryDiv.appendChild(img);
    });
}

renderPhotos();