interface Web
js tutoriel
Analyser le principe du flux de cascade Javascript pour réaliser le chargement par défilement des compétences images_javascript
Analyser le principe du flux de cascade Javascript pour réaliser le chargement par défilement des compétences images_javascript
Apprenons d'abord le débit de la cascade
Débit en cascade, également connu sous le nom de disposition du débit en cascade. Il s'agit d'une mise en page de site Web relativement populaire. La performance visuelle est une mise en page multi-colonnes irrégulière. À mesure que la barre de défilement de la page défile vers le bas, cette mise en page chargera en permanence les blocs de données et les ajoutera à la queue actuelle. Le premier site Web à adopter cette mise en page a été Pinterest, qui est progressivement devenu populaire dans le pays. La plupart des nouveaux sites Web en Chine utilisent essentiellement ce style, comme Meilishuo et Taobao.
C'est un effet que j'ai obtenu, c'est-à-dire qu'il ne se chargera pas, quelle que soit la façon dont je fais défiler. Coulez et coulez comme une cascade !
Nous ne parlons ici que de la méthode d'implémentation Js
Principe de mise en œuvre :
Calculez pour la première fois les éléments du bloc de données existants dans le conteneur : 1. Largeur totale du conteneur 2. Largeur des colonnes 3. Nombre minimum de colonnes. Après avoir obtenu le nombre de colonnes, utilisez un tableau pour stocker toutes les hauteurs. de la boîte pour trouver la hauteur minimale. Ensuite, la hauteur est mise à jour en fonction du numéro de série ; cela semble un peu gênant, mais c'est très simple à mettre en œuvre.
Pour le chargement par défilement : c'est-à-dire qu'après avoir fait défiler jusqu'à une hauteur, vous devez charger des données. En fait, il s'agit de la valeur de hauteur minimale de la colonne. De cette façon, il est possible de comparer la valeur de défilement actuelle avec la valeur de hauteur minimale. déterminer s'il faut déclencher le chargement des données ; Écrire une fonction pour déterminer si les conditions de chargement des images sont remplies. Si tel est le cas, commencez le chargement. Par exemple, obtenez le offsetTop, la hauteur de la zone visuelle et la distance de défilement de la dernière image. Autrement dit, lorsque le offsetTop de l'image est inférieur à la somme de la hauteur de la zone visuelle et de la distance de défilement, elle doit être chargée à ce moment-là. , mais les conditions peuvent être déterminées arbitrairement. Vous pouvez également attendre que l'image défile à mi-chemin avant de déclencher la condition de chargement, comme indiqué sur l'image :
Entrez d'abord le code HTML CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterfall</title>
<script src="script.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
}
#container {
}
#container .pin {
padding-left: 15px;
padding-top: 15px;
float: left;
}
#container .div-box {
float: left;
border: 1px solid #ccc;
box-shadow: 0 0 5px #bbb;
background: #fff;
padding: 12px;
border-radius: 9px;
}
#container .div-box img {
width: 300px;
}
#container .div-box p {
text-align: center;
font-size: 20px;
font-weight: bold;
color: red;
}
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div class="pin">
<div class="div-box">
<img src="img/1.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/2.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/3.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/4.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/5.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/6.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/7.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/8.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/9.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/10.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/1.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/2.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/3.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/4.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/5.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/6.jpg" alt="">
<p>白超华-博客园</p>
</div>
</div>
</div>
</body>
</html>
Code JS, chaque ligne a des commentaires
window.onload = function(){
var data = { //模拟后台数据 的一个JSON格式的文件
"data":[
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
]
};
window.onscroll = function(){
if(checkScroll()){ //判断是否具备滚动加载得条件
var oParent = document.getElementById('container');
for(var i=0; i<data.data.length; i++){
var div1 = document.createElement('div'); //创建div元素
div1.className = 'pin'; //设置class
oParent.appendChild(div1);
var div2 = document.createElement('div');//创建div元素
div2.className = 'div-box';
div1.appendChild(div2);
var imgs = document.createElement('img');//创建img元素
imgs.style.width = '300px';
imgs.src = 'img/'+data.data[i].src; //设置读取路径
div2.appendChild(imgs);
var p = document.createElement('p');//创建p元素
p.innerHTML = '白超华-博客园';
div2.appendChild(p);
}
waterfall('container','pin'); //--注意 别忘了这句，当滚动时候就执行
}
}
waterfall('container','pin');
}
function waterfall(parent, box){
var oParent = document.getElementById(parent);//获取父级对象
var aBox = getByClass(oParent,box);//获取所有class为pin的盒子的集合
var boxWidth = aBox[0].offsetWidth;//获取一个盒子的宽
var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//获取可视区宽
var cols = Math.floor(pageWidth/boxWidth);//获得列数
var arrH = [];//用于存放盒子的高
for(var i=0; i<aBox.length; i++){
if(i<cols){//当小于第一列个数的时候
arrH.push(aBox[i].offsetHeight);
} else {
var minH = Math.min.apply(null,arrH);//得到数组中盒字的最小高度minH;
var index = getMinIndex(arrH,minH);
aBox[i].style.position = 'absolute';//设置绝对定位
aBox[i].style.top = minH+'px';//设置top，就是最小高度
aBox[i].style.left = aBox[0].offsetWidth*index+'px';//设置left，就是一个盒子的宽*index索引数
arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高
}
}
}
//通过父级获取class
function getByClass(parent, classname){
var aClass = parent.getElementsByTagName('*');
var arr = [];
for(var i=0; i<aClass.length; i++){
if(aClass[i].className == classname){
arr.push(aClass[i]);
}
}
return arr;
}
//最小值的索引index
function getMinIndex(arr,val){
for( i in arr){
if(arr[i] == val){
return i;
}
}
}
//
function checkScroll(){
var oParent = document.getElementById('container');
var aBox = getByClass(oParent,'pin');
var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 当滚到到这个距离时候就开始加载
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滚动距离
var documentHeight = document.documentElement.clientHeight; //页面高度
if(lastBoxHeight<scrollTop+documentHeight){
return true;
}
}
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
PowerPoint peut-il exécuter JavaScript?
Apr 01, 2025 pm 05:17 PM
JavaScript peut être exécuté dans PowerPoint et peut être implémenté en appelant des fichiers JavaScript externes ou en intégrant des fichiers HTML via VBA. 1. Pour utiliser VBA pour appeler les fichiers JavaScript, vous devez activer les macros et avoir des connaissances en programmation VBA. 2. ENCHED des fichiers HTML contenant JavaScript, qui sont simples et faciles à utiliser mais sont soumis à des restrictions de sécurité. Les avantages incluent les fonctions étendues et la flexibilité, tandis que les inconvénients impliquent la sécurité, la compatibilité et la complexité. En pratique, l'attention doit être accordée à la sécurité, à la compatibilité, aux performances et à l'expérience utilisateur.
