JavaScript 如何實現滾動到頁面底部自動載入的內容縮放並保持縱橫比效果？

JavaScript 如何實作捲動至頁面底部自動載入的內容縮放並保持縱橫比效果？

在現代網頁設計中，捲動到頁面底部自動載入更多內容已經成為了常見的功能需求。而當載入的內容包含圖片時，我們常常希望這些圖片能夠維持原有的縱橫比。本文將介紹如何使用 JavaScript 來實作這個功能，並提供對應的程式碼範例供參考。

首先，我們需要取得頁面捲動的位置。在 JavaScript 中，可以使用 scroll 事件來監聽頁面滾動的動作，並透過 window.scrollY 屬性來取得目前頁面滾動的垂直距離。

接下來，我們可以透過比較目前頁面的捲動位置與頁面的總高度來判斷是否捲動到了底部。若目前頁面捲動位置加上視窗的可見高度大於或等於頁面的總高度，即表示已捲動至底部。

當捲動到底部時，我們可以進行載入更多內容的操作。在本範例中，我們將使用模擬的資料進行演示，以便集中展示關鍵技術。在實際專案中，你需要根據自己專案的需求和資料介面進行相應的修改。

window.addEventListener('scroll', function() {
  var windowHeight = window.innerHeight; // 可见窗口的高度
  var fullHeight = document.body.clientHeight; // 页面的总高度
  var scrollTop = window.scrollY; // 页面滚动的垂直距离

  if (scrollTop + windowHeight >= fullHeight) {
    // 加载更多内容的代码，以下为示例
    var newData = getMoreData(); // 模拟获取更多数据的函数
    var container = document.getElementById('container'); // 内容容器的 DOM 元素

    newData.forEach(function(item) {
      var img = document.createElement('img');
      img.src = item.src;
      img.onload = function() {
        // 图片加载完成后，计算该图片的缩放比例
        var ratio = Math.min(window.innerWidth / img.width, windowHeight / img.height);
        img.style.width = img.width * ratio + 'px';
        img.style.height = img.height * ratio + 'px';
        container.appendChild(img);
      };
    });
  }
});

function getMoreData() {
  // 模拟获取更多数据的函数，返回一个包含图片信息的数组
  return [
    { src: 'image1.jpg' },
    { src: 'image2.jpg' },
    { src: 'image3.jpg' },
    // ...
  ];
}

在上述範例程式碼中，我們在捲動事件的回呼函數中，判斷是否捲動到頁面底部。如果是，則呼叫 getMoreData() 函數模擬取得更多資料的操作，並對每個圖片計算縮放比例，保持縱橫比。透過調整 IMG 元素的 width 和 height 樣式來實現縮放效果。

要注意的是，在圖片載入完成後，我們才能取得到圖片的原始寬高，所以在圖片載入完成之前，我們先建立一個暫時的IMG 元素，並設定src 屬性。然後在圖片載入完成時，再計算縮放比例並設定 width 和 height 樣式，最後將圖片加入容器中。

以上便是使用 JavaScript 實作捲動到頁面底部自動載入內容並保持縱橫比的範例程式碼。你可以根據實際需求，對程式碼進行相應的修改和擴展。希望本文對你有幫助！

以上是JavaScript 如何實現滾動到頁面底部自動載入的內容縮放並保持縱橫比效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！