Bagaimana untuk menggunakan JavaScript untuk menskalakan kandungan yang dimuatkan secara automatik apabila menatal ke bahagian bawah halaman sambil mengekalkan kesan nisbah aspek?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk menskalakan kandungan yang dimuatkan secara automatik apabila menatal ke bahagian bawah halaman sambil mengekalkan kesan nisbah aspek?

王林

Lepaskan： 2023-10-27 12:36:19

asal

848 orang telah melayarinya

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

JavaScript Bagaimana untuk mencapai tatal ke bahagian bawah halaman untuk memuatkan zum kandungan secara automatik dan mengekalkan kesan nisbah aspek?

Dalam reka bentuk web moden, menatal ke bahagian bawah halaman untuk memuatkan lebih banyak kandungan secara automatik telah menjadi keperluan fungsian biasa. Apabila kandungan yang dimuatkan mengandungi imej, kami selalunya mahu imej ini mengekalkan nisbah aspek asalnya. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi ini dan menyediakan contoh kod yang sepadan untuk rujukan.

Pertama, kita perlu mendapatkan kedudukan tatal halaman. Dalam JavaScript, anda boleh menggunakan acara scroll untuk memantau tindakan menatal halaman dan mendapatkan jarak menegak halaman semasa menatal melalui harta 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' },
    // ...
  ];
}

Salin selepas log masuk

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

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

Seterusnya, kita boleh menentukan sama ada skrol telah sampai ke bahagian bawah dengan membandingkan kedudukan skrol halaman semasa dengan jumlah ketinggian halaman. Jika kedudukan tatal halaman semasa ditambah ketinggian tetingkap yang boleh dilihat adalah lebih besar daripada atau sama dengan jumlah ketinggian halaman, ini bermakna ia telah ditatal ke bawah.

Apabila menatal ke bawah, kami boleh melakukan operasi memuatkan lebih banyak kandungan. Dalam contoh ini, kami akan menunjukkan penggunaan data simulasi untuk menumpukan pada teknologi utama. Dalam projek sebenar, anda perlu membuat pengubahsuaian yang sepadan mengikut keperluan dan antara muka data projek anda sendiri. 🎜rrreee🎜Dalam kod contoh di atas, kami menentukan sama ada untuk menatal ke bahagian bawah halaman dalam fungsi panggil balik acara tatal. Jika ya, fungsi getMoreData() dipanggil untuk mensimulasikan operasi mendapatkan lebih banyak data dan mengira nisbah penskalaan untuk setiap imej, mengekalkan nisbah bidang. Kesan penskalaan dicapai dengan melaraskan gaya lebar dan height elemen IMG. 🎜🎜Perlu diingatkan bahawa kita hanya boleh mendapatkan lebar dan ketinggian asal imej selepas imej dimuatkan, jadi sebelum imej dimuatkan, kita mula-mula mencipta elemen IMG sementara dan menetapkan src. Kemudian apabila imej dimuatkan, kira penskalaan dan tetapkan gaya lebar dan height, dan akhirnya tambahkan imej pada bekas. 🎜🎜Di atas ialah contoh kod yang menggunakan JavaScript untuk memuatkan kandungan secara automatik sambil mengekalkan nisbah bidang apabila menatal ke bahagian bawah halaman. Anda boleh mengubah suai dan mengembangkan kod dengan sewajarnya mengikut keperluan sebenar. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk menskalakan kandungan yang dimuatkan secara automatik apabila menatal ke bahagian bawah halaman sambil mengekalkan kesan nisbah aspek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!