Comment utiliser JavaScript pour mettre à l'échelle le contenu qui se charge automatiquement lors du défilement vers le bas de la page tout en conservant l'effet de format ?-js tutoriel-php.cn

Comment utiliser JavaScript pour mettre à l'échelle le contenu qui se charge automatiquement lors du défilement vers le bas de la page tout en conservant l'effet de format ?

王林

Libérer： 2023-10-27 12:36:19

original

848 Les gens l'ont consulté

JavaScript 如何实现滚动到页面底部自动加载的内容缩放并保持纵横比效果？

JavaScript Comment faire défiler vers le bas de la page pour charger automatiquement le zoom du contenu et conserver l'effet de rapport hauteur/largeur ?

Dans la conception Web moderne, faire défiler vers le bas de la page pour charger automatiquement plus de contenu est devenu une exigence fonctionnelle courante. Lorsque le contenu chargé contient des images, nous souhaitons souvent que ces images conservent leur rapport hauteur/largeur d'origine. Cet article explique comment utiliser JavaScript pour implémenter cette fonction et fournit des exemples de code correspondants à titre de référence.

Tout d’abord, nous devons obtenir la position de défilement de la page. En JavaScript, vous pouvez utiliser l'événement scroll pour surveiller l'action de défilement de la page et obtenir la distance verticale de la page actuelle défilant dans la propriété window.scrollY. 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' },
    // ...
  ];
}

Copier après la connexion

在上述示例代码中，我们在滚动事件的回调函数中，判断是否滚动到页面底部。如果是，则调用 getMoreData() 函数模拟获取更多数据的操作，并对每个图片计算缩放比例，保持纵横比。通过调整 IMG 元素的 width 和 height 样式来实现缩放效果。

需要注意的是，在图片加载完成后，我们才能获取到图片的原始宽高，所以在图片加载完成前，我们先创建一个临时的 IMG 元素，并设置 src 属性。然后在图片加载完成时，再计算缩放比例并设置 width 和 height

Ensuite, nous pouvons déterminer si le défilement a atteint le bas en comparant la position de défilement de la page actuelle avec la hauteur totale de la page. Si la position de défilement de la page en cours plus la hauteur visible de la fenêtre est supérieure ou égale à la hauteur totale de la page, cela signifie qu'elle a défilé vers le bas.

Lors du défilement vers le bas, nous pouvons effectuer l'opération de chargement de plus de contenu. Dans cet exemple, nous démontrerons l'utilisation de données simulées pour nous concentrer sur les technologies clés. Dans les projets réels, vous devez apporter les modifications correspondantes en fonction des besoins et de l'interface de données de votre propre projet. 🎜rrreee🎜Dans l'exemple de code ci-dessus, nous déterminons s'il faut faire défiler vers le bas de la page dans la fonction de rappel de l'événement de défilement. Si tel est le cas, la fonction getMoreData() est appelée pour simuler l'opération d'obtention de plus de données et calculer le rapport de mise à l'échelle pour chaque image, en conservant le rapport hauteur/largeur. L'effet de mise à l'échelle est obtenu en ajustant les styles width et height de l'élément IMG. 🎜🎜Il convient de noter que nous ne pouvons obtenir la largeur et la hauteur d'origine de l'image qu'après le chargement de l'image, donc avant que l'image ne soit chargée, nous créons d'abord un élément IMG temporaire et définissons le src. Ensuite, lorsque l'image est chargée, calculez la mise à l'échelle et définissez les styles width et height, et enfin ajoutez l'image au conteneur. 🎜🎜Ce qui précède est un exemple de code qui utilise JavaScript pour charger automatiquement le contenu tout en conservant les proportions lors du défilement vers le bas de la page. Vous pouvez modifier et développer le code en fonction des besoins réels. J'espère que cet article vous aidera ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!