Bagaimanakah JavaScript boleh menskalakan kandungan yang dimuatkan secara automatik apabila menatal ke bahagian bawah halaman sambil mengekalkan nisbah aspek dan pemusatan?

JavaScript Bagaimana hendak melaksanakan penatalan ke bahagian bawah halaman untuk memuatkan kandungan secara automatik yang menskalakan dan mengekalkan nisbah aspek dan paparan berpusat?

Dalam pembangunan web, kadangkala kita perlu memuatkan lebih banyak kandungan secara automatik apabila pengguna menatal ke bahagian bawah halaman. Semasa proses pemuatan, kandungan selalunya perlu diskalakan untuk memastikan paparan yang cantik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk memuatkan kandungan secara automatik apabila menatal ke bahagian bawah halaman dan untuk menskalakan kandungan yang dimuatkan sambil mengekalkan nisbah aspek dan paparan berpusatnya.

Pertama, kita perlu mendengar acara tatal halaman web. Fungsi yang memuatkan kandungan dicetuskan apabila menatal ke bahagian bawah halaman. Contohnya:

window.addEventListener('scroll', function() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // 执行加载内容的函数
        loadMoreContent();
    }
});

Dalam kod di atas, window.innerHeight mewakili ketinggian tetingkap penyemak imbas dan window.scrollY mewakili offset menegak daripada bar skrol , document.body.offsetHeight mewakili ketinggian keseluruhan halaman. Apabila menatal ke bahagian bawah halaman, nilai window.innerHeight + window.scrollY akan lebih besar daripada atau sama dengan nilai document.body.offsetHeight. window.innerHeight表示浏览器窗口的高度，window.scrollY表示滚动条的垂直偏移量，document.body.offsetHeight表示整个页面的高度。当滚动到页面底部时，window.innerHeight + window.scrollY的值将大于或等于document.body.offsetHeight的值。

接下来，我们需要定义加载内容的函数loadMoreContent()。在这个函数中，我们可以使用AJAX等技术从服务器动态加载内容。为了简单起见，在这里我们假设已经有一个数组contentData存储了要加载的内容。我们将获取数组中的内容，并动态创建DOM元素来展示。

function loadMoreContent() {
    // 获取要加载的内容
    var content = contentData.shift();
    
    // 创建DOM元素
    var contentDiv = document.createElement('div');
    contentDiv.className = 'content-div';
    var img = document.createElement('img');
    img.src = content.imgUrl;
    // 设置缩放样式
    img.style.maxHeight = '100%';
    img.style.maxWidth = '100%';
    img.style.objectFit = 'contain';
    contentDiv.appendChild(img);
    
    // 将DOM元素插入页面指定位置
    var container = document.getElementById('content-container');
    container.append(contentDiv);
    
    // 确保居中显示
    centerContent(contentDiv);
}

在上述代码中，我们首先从contentData数组中取出要加载的内容。然后，创建一个<div>元素作为内容的容器，在其中创建一个<img>元素用于展示内容。通过设置img元素的样式，我们将内容进行缩放，保证其纵横比并居中显示。最后，通过append方法将内容插入到页面指定位置。

为了保持加载的内容居中显示，我们还需要定义一个函数centerContent(elem)。

function centerContent(elem) {
    // 获取父容器的宽度和高度
    var parentWidth = elem.parentNode.offsetWidth;
    var parentHeight = elem.parentNode.offsetHeight;
    
    // 获取内容的宽度和高度
    var contentWidth = elem.offsetWidth;
    var contentHeight = elem.offsetHeight;
    
    // 计算左边和上边的偏移量
    var leftOffset = (parentWidth - contentWidth) / 2;
    var topOffset = (parentHeight - contentHeight) / 2;
    
    // 设置居中样式
    elem.style.left = leftOffset + 'px';
    elem.style.top = topOffset + 'px';
}

在上述代码中，我们首先获取父容器的宽度和高度，以及内容的宽度和高度。然后，通过计算父容器和内容之间的偏移量，将内容居中显示。最后，通过设置left和top

Seterusnya, kita perlu mentakrifkan fungsi loadMoreContent() untuk memuatkan kandungan. Dalam fungsi ini, kita boleh memuatkan kandungan secara dinamik dari pelayan menggunakan teknologi seperti AJAX. Demi kesederhanaan, di sini kita mengandaikan bahawa sudah ada tatasusunan contentData yang menyimpan kandungan untuk dimuatkan. Kami akan mendapatkan kandungan tatasusunan dan mencipta elemen DOM secara dinamik untuk paparan.

rrreee

Dalam kod di atas, kami mula-mula mendapatkan semula kandungan untuk dimuatkan daripada tatasusunan contentData. Kemudian, cipta elemen <div> sebagai bekas untuk kandungan dan buat elemen <img> di dalamnya untuk memaparkan kandungan. Dengan menggayakan elemen img, kami menskalakan kandungan untuk mengekalkan nisbah bidang dan memusatkannya. Akhir sekali, kandungan dimasukkan ke dalam lokasi yang ditentukan pada halaman melalui kaedah tambah. #🎜🎜##🎜🎜#Untuk memastikan kandungan yang dimuatkan dipaparkan di tengah, kita juga perlu mentakrifkan fungsi centerContent(elem). #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mula-mula mendapat lebar dan tinggi bekas induk, serta lebar dan tinggi kandungan. Kemudian, kandungan dipusatkan dengan mengira offset antara bekas induk dan kandungan. Akhir sekali, tengahkan kandungan dengan menetapkan gaya kiri dan atas. #🎜🎜##🎜🎜# Melalui kod di atas, apabila pengguna menatal ke bahagian bawah halaman, lebih banyak kandungan akan dimuatkan secara automatik dan kandungan yang dimuatkan akan diskalakan untuk mengekalkan nisbah aspek dan paparan berpusatnya. Sudah tentu, kami juga boleh menyesuaikan lebih banyak gaya dan fungsi mengikut keperluan khusus. #🎜🎜#

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