now you need to think deeply. there are different size of images. but you need to change the way the images load. you should first know how many column there are. if ther 3 column then you should do for each column separate. 1st you should add a image in first column then 2nd then 3rd then 4th then calculate the total height of the column by knowing(use some way to know the size then calculate the height by calculating from fixed weidth) the size of the images. after calculating all 4 column height then add image what have least height then again calculate all 4 then again add image least height column. do these way all. need advance code.... use this.in column 2nd image start from same where the first image end then 3rd where the previus image of that column end, this way. all with same gap..... think deeply what i want to tell you .update this full code and give me full code:

<html>
<base href="https://example.com">

<head><script type="text/javascript" src="/___vscode_livepreview_injected_script"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PhotoVerse - Photography Blog</title>
    <!-- AOS CSS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1a1a1a;
            --secondary-color: #ffffff;
            --accent-color: #64b5f6;
            --text-color: #f0f0f0;
            --bg-color: #121212;
            --card-bg: rgba(255, 255, 255, 0.05);
            --shadow-color: rgba(255, 255, 255, 0.1);
        }

        .dark-mode {
            --primary-color: #ffffff;
            --secondary-color: #1a1a1a;
            --accent-color: #90caf9;
            --text-color: #ffffff;
            --bg-color: #0d0d0d;
            --card-bg: rgba(255, 255, 255, 0.1);
            --shadow-color: rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
            background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
            animation: gradientBG 20s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        header {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 4px 6px var(--shadow-color);
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--accent-color);
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .theme-toggle {
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
            font-size: 1.5rem;
        }

        main {
            max-width: 1200px;
            margin: 100px auto 2rem;
            padding: 0 1rem;
        }

        .filters {
            margin-bottom: 2rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            background: var(--card-bg);
            border: none;
            border-radius: 25px;
            color: var(--text-color);
            cursor: pointer;
            backdrop-filter: blur(5px);
            transition: transform 0.3s ease;
        }

        .filter-btn:hover {
            transform: translateY(-2px);
        }

        .search-bar {
            flex: 1;
            padding: 0.8rem;
            border: none;
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--text-color);
            backdrop-filter: blur(5px);
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
        }

        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            background: var(--card-bg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .gallery-item:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 20px var(--shadow-color);
        }

        .gallery-item img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
        }

        .gallery-item-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 1rem;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .gallery-item-overlay {
            opacity: 1;
        }

        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 90vh;
            border-radius: 8px;
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 2rem;
            cursor: pointer;
        }

        .load-more-container {
            text-align: center;
            margin: 2rem 0;
        }

        .load-more-btn {
            padding: 0.8rem 2rem;
            background: var(--accent-color);
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .load-more-btn:hover {
            background: #5fa8d3;
        }

        footer {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            padding: 2rem 1rem;
            margin-top: 4rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .footer-section h3 {
            color: var(--accent-color);
            margin-bottom: 1rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
        }

        .social-links a {
            color: var(--text-color);
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: var(--accent-color);
        }

        .newsletter-form {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .newsletter-form input {
            flex: 1;
            padding: 0.5rem;
            border: none;
            border-radius: 4px;
            background: var(--bg-color);
            color: var(--text-color);
        }

        .newsletter-form button {
            padding: 0.5rem 1rem;
            background: var(--accent-color);
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .newsletter-form button:hover {
            background: #5fa8d3;
        }

        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }

            .nav-links {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .gallery {
                grid-template-columns: 1fr;
            }

            .filters {
                flex-direction: column;
                align-items: stretch;
            }

            .search-bar {
                margin-bottom: 1rem;
            }
        }

        .loading-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3000;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 6px solid var(--card-bg);
            border-top: 6px solid var(--accent-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>

<body>
    <div class="background-animation"></div>

    <div class="loading-animation">
        <div class="loader"></div>
    </div>

    <header>
        <nav>
            <div class="logo">PhotoVerse</div>
            <div class="nav-links">
                <a href="https://example.com/home">Home</a>
                <a href="https://example.com/gallery">Gallery</a>
                <a href="https://example.com/blog">Blog</a>
                <a href="https://example.com/about">About</a>
                <a href="https://example.com/contact">Contact</a>
            </div>
            <button class="theme-toggle" aria-label="Toggle Dark Mode">
                <i class="fas fa-moon"></i>
            </button>
        </nav>
    </header>

    <main>
        <div class="filters">
            <input type="text" class="search-bar" placeholder="Search photos...">
            <button class="filter-btn" data-category="all">All</button>
            <button class="filter-btn" data-category="nature">Nature</button>
            <button class="filter-btn" data-category="urban">Urban</button>
            <button class="filter-btn" data-category="portrait">Portrait</button>
            <button class="filter-btn" data-category="travel">Travel</button>
        </div>

        <div class="gallery" data-aos="fade-up">
            <!-- Gallery items will be dynamically added here -->
        </div>

        <div class="load-more-container">
            <button class="load-more-btn">Load More</button>
        </div>
    </main>

    <div class="lightbox">
        <span class="lightbox-close">&times;</span>
        <img src="" alt="Enlarged photo">
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>About PhotoVerse</h3>
                <p>Capturing moments, creating memories, and sharing stories through the lens of life.</p>
            </div>
            <div class="footer-section">
                <h3>Connect</h3>
                <div class="social-links">
                    <a href="https://instagram.com/example" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="https://facebook.com/example" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
                    <a href="https://twitter.com/example" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="https://pinterest.com/example" aria-label="Pinterest"><i class="fab fa-pinterest"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>Newsletter</h3>
                <form class="newsletter-form" action="https://example.com/subscribe" method="POST">
                    <input type="email" name="email" placeholder="Enter your email" required>
                    <button type="submit">Subscribe</button>
                </form>
            </div>
        </div>
    </footer>

    <!-- AOS JS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });

        // Remove loading animation once content is loaded
        window.addEventListener('load', () => {
            document.querySelector('.loading-animation').style.display = 'none';
        });

        // Theme toggle functionality
        const themeToggle = document.querySelector('.theme-toggle');
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            themeToggle.querySelector('i').classList.toggle('fa-moon');
            themeToggle.querySelector('i').classList.toggle('fa-sun');
        });

        // Gallery data
        const gallery = document.querySelector('.gallery');
        const loadMoreBtn = document.querySelector('.load-more-btn');
        const categories = ['nature', 'urban', 'portrait', 'travel'];
        const titles = [
            'Mountain Sunset', 'City Lights', 'Ocean Waves', 'Desert Dawn',
            'Forest Path', 'Urban Architecture', 'Street Life', 'Wildlife',
            'Beach Sunset', 'Mountain Lake', 'City Streets', 'Rural Life',
            'Autumn Leaves', 'Snowy Peaks', 'Flower Bloom', 'Night Sky',
            'River Flow', 'Sunrise Bliss', 'Sunset Glow', 'Urban Jungle'
        ];
        let photoCount = 0;
        const photosPerLoad = 12;

        // Function to load photos
        function loadPhotos(count) {
            const columnHeights = [0, 0, 0, 0]; // Initialize column heights for 4 columns
            for (let i = 0; i < count; i++) {
                const category = categories[Math.floor(Math.random() * categories.length)];
                const title = titles[Math.floor(Math.random() * titles.length)];
                const width = 400 + Math.floor(Math.random() * 200); // 400-600
                const height = 300 + Math.floor(Math.random() * 200); // 300-500
                const imgNumber = photoCount + i + 1;

                const img = document.createElement('img');
                img.src = `https://picsum.photos/${width}/${height}?random=${imgNumber}`;
                img.alt = `${title} - ${category}`;
                img.width = width;
                img.height = height;
                img.onload = () => {
                    // Calculate aspect ratio and adjust height based on fixed width (e.g., 250px)
                    const aspectRatio = img.width / img.height;
                    const fixedWidth = 250; // Assuming a fixed column width of 250px
                    img.style.width = `${fixedWidth}px`;
                    img.style.height = `${fixedWidth / aspectRatio}px`;

                    // Find the column with the least height
                    const shortestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));

                    // Append the image to the shortest column
                    const column = document.createElement('div');
                    column.className = 'gallery-column';
                    column.style.width = `${fixedWidth}px`; // Set fixed column width
                    column.appendChild(img);
                    gallery.appendChild(column);

                    // Update the column height
                    columnHeights[shortestColumnIndex] += fixedWidth / aspectRatio;
                };

                const item = document.createElement('div');
                item.className = 'gallery-item';
                item.setAttribute('data-category', category);
                item.setAttribute('data-aos', 'fade-up');

                // item.appendChild(img); // Image is now appended to the column

                const overlay = document.createElement('div');
                overlay.className = 'gallery-item-overlay';
                overlay.innerHTML = `<h3>${title}</h3><p>${category.charAt(0).toUpperCase() + category.slice(1)}</p>`;
                item.appendChild(overlay);

                // Lightbox functionality
                item.addEventListener('click', () => {
                    const lightbox = document.querySelector('.lightbox');
                    const lightboxImg = lightbox.querySelector('img');
                    lightboxImg.src = img.src;
                    lightboxImg.alt = img.alt;
                    lightbox.style.display = 'flex';
                });

                // gallery.appendChild(item); // Item is now appended to the column
            }
            AOS.refresh();
            photoCount += count;
        }

        // Initial load
        loadPhotos(photosPerLoad);

        // Load more button functionality
        loadMoreBtn.addEventListener('click', () => {
            loadMoreBtn.disabled = true;
            loadMoreBtn.textContent = 'Loading...';
            // Simulate async loading
            setTimeout(() => {
                loadPhotos(photosPerLoad);
                loadMoreBtn.disabled = false;
                loadMoreBtn.textContent = 'Load More';
            }, 1000);
        });

        // Lightbox close functionality
        const lightbox = document.querySelector('.lightbox');
        const lightboxClose = document.querySelector('.lightbox-close');
        lightboxClose.addEventListener('click', () => {
            lightbox.style.display = 'none';
        });
        // Close lightbox when clicking outside the image
        lightbox.addEventListener('click', (e) => {
            if (e.target === lightbox) {
                lightbox.style.display = 'none';
            }
        });

        // Filter functionality
        const filterButtons = document.querySelectorAll('.filter-btn');
        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                const category = button.getAttribute('data-category');
                document.querySelectorAll('.gallery-item').forEach(item => {
                    if (category === 'all' || item.getAttribute('data-category') === category) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });

        // Search functionality
        const searchBar = document.querySelector('.search-bar');
        searchBar.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            document.querySelectorAll('.gallery-item').forEach(item => {
                const title = item.querySelector('.gallery-item-overlay h3').textContent.toLowerCase();
                const category = item.getAttribute('data-category').toLowerCase();
                if (title.includes(searchTerm) || category.includes(searchTerm)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
</body>

</html>