js照片墙

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

<style>
  .photo {
    width: 200px;
    height: 200px;
    transition: transform 0.3s ease;
  }
  .photo:hover {
    transform: scale(1.5);
  }
</style>
<img class="photo" src="path_to_image.jpg" alt="Sample Photo">

.photo-container {
  display: flex;
  flex-wrap: wrap;
}
.photo {
  width: 33.33%;
  padding: 5px;
}
@media (max-width: 768px) {
  .photo {
    width: 50%;
  }
}
@media (max-width: 480px) {
  .photo {
    width: 100%;
  }
}