照片墙js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="photo-wall" id="photoWall">
        <!-- 图片将通过JavaScript动态添加 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
}

.photo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}

.photo-wall img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

document.addEventListener('DOMContentLoaded', function() {
    const photoWall = document.getElementById('photoWall');
    const images = [
        'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg',
        'image5.jpg', 'image6.jpg', 'image7.jpg', 'image8.jpg'
    ];

    images.forEach(image => {
        const imgElement = document.createElement('img');
        imgElement.src = image;
        photoWall.appendChild(imgElement);
    });
});