Unsplash api ile koleksiyon çekme ve kullanma

// Belirtilen kimliğe sahip HTML elementini al
const unsplash_collections = document.getElementById("unsplash-collections");

// Element varsa devam et
if (unsplash_collections) {
  // Unsplash API anahtarını al
  const client_id = "f_ljObZDY9xozwVHZGfQfa9hkqYP9WyvbRkbK4Hap74";

  // Koleksiyon kimliğini al
  const collection_id = unsplash_collections.dataset.collectionId;

  // Her sayfada görüntülenecek fotoğraf sayısı
  const per_page = 30;

  // Sayfa numarası ve yükleme durumu değişkenleri
  let page = 1;
  let isLoading = false;

  // Daha fazla fotoğraf yükleme işlevi
  const loadMore = async () => {
    // Yükleme işlemi devam ediyorsa çık
    if (isLoading) return;
    isLoading = true;

    try {
      // Unsplash API'ye istek gönder ve veri al
      const response = await fetch(`https://api.unsplash.com/collections/${collection_id}/photos/?client_id=${client_id}&per_page=${per_page}&page=${page}`);
      const data = await response.json();

      // Gelen veri varsa işle
      if (data.length > 0) {
        // Her bir fotoğraf için HTML içeriği oluştur ve ekle
        data.forEach(({ urls }) => {
          unsplash_collections.insertAdjacentHTML('beforeend', generateHTML(urls));
        });
        page++;
      }
    } catch (error) {
      // Hata durumunda konsola yazdır
      console.error("Bir hata oluştu:", error);
    }

    // Yükleme işlemi tamamlandığında durumu güncelle
    isLoading = false;
  };

  // Fotoğraf HTML içeriğini oluşturma işlevi
  const generateHTML = (urls) => {
    return `<div class="masonry-item"> 
            <img src="${urls.thumb}" width="210" height="280" alt="image" />
        </div>`;
  };

  // Sayfa kaydırıldığında daha fazla fotoğraf yükleme
  window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight - 200) {
      loadMore();
    }
  });

  // İlk yükleme işlemini başlat
  loadMore();
}