jquery照片墙代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Photo Wall</title>
    <style>
        #photo-wall {
            position: relative;
        }
        .photo-item {
            position: absolute;
            width: 200px;
            transition: all 0.3s ease;
        }
        .photo-item img {
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div id="photo-wall"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var images = [
                'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg',
                'image5.jpg', 'image6.jpg', 'image7.jpg', 'image8.jpg'
            ];

            var wall = $('#photo-wall');
            var columnCount = 4;
            var columns = new Array(columnCount).fill(0);

            images.forEach(function(image) {
                var minHeightIndex = columns.indexOf(Math.min(...columns));
                var photoItem = $('<div class="photo-item"></div>');
                photoItem.css({
                    left: minHeightIndex * 210 + 'px',
                    top: columns[minHeightIndex] + 'px'
                });
                photoItem.append($('<img src="' + image + '">'));
                wall.append(photoItem);
                columns[minHeightIndex] += 210 + 10; // 210px width + 10px margin
            });

            wall.height(Math.max(...columns));
        });
    </script>
</body>
</html>