JavaScript implémente le flux en cascade et les effets de chargement

Cet article présente principalement les informations pertinentes de JavaScript pour implémenter en détail le flux de cascade et l'effet de chargement. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

1. Waterfall Qu'est-ce que le flux ?

Waterfall Flow est une mise en page de site Web relativement populaire. Les performances visuelles sont une mise en page multi-colonnes inégale. À mesure que la barre de défilement de la page défile vers le bas, cette mise en page continuera à charger des données et à y ajouter des éléments. la queue actuelle.

Le premier site Web à adopter la disposition en cascade a été Pinterest, qui est progressivement devenu populaire en Chine. Par exemple, nous connaissons la disposition des images Baidu "Il y a longtemps", les images Baidu devaient encore l'être. être cliqué page par page pour afficher plus d'images, et la disposition actuelle en cascade permet aux utilisateurs de trouver plus facilement des images.

2. Avantages et inconvénients du débit en cascade

Avantages :

1. Économise de l'espace sur la page et n'a plus besoin de boutons de navigation et de numéro de page.

2. Améliorez l'expérience utilisateur, afin que l'expérience utilisateur consiste davantage à parcourir les images, plutôt qu'à trouver comment trouver la page suivante et à changer d'opération.

Inconvénients :

1. Types limités de pages Web utilisées :

Cette disposition en cascade ne convient qu'à certains. Une partie d'un type spécifique de contenu dans un type spécifique de produit.

Par exemple, lorsque nous achetons quelque chose dans un certain magasin, nous devons nous rappeler quel produit sur quelle page nous voulons acheter, puis revenir en arrière pour l'acheter. À ce moment-là, nous avons besoin des boutons de notre page pour. N'oubliez pas que le débit en cascade est plus gênant.

2. Le pied de page qui ne sera jamais vu :

Si nous utilisons le mode de chargement par défilement infini en cascade, cela signifie que nous ne pourrons jamais voir notre pied de page lorsque l'utilisateur le répète. et encore Si vous naviguez vers le bas de la page et voyez le pied de page, mais qu'en raison de l'apparition soudaine d'un contenu chargé automatiquement, vous ne pouvez pas cliquer sur le lien dans le pied de page ou vous connecter, alors l'expérience utilisateur est extrêmement mauvaise, et ils peut être en colère. Fermez votre page Web.

3. Concernant le nombre de pages :

Pour les utilisateurs, il est en fait très pratique d'utiliser le chargement automatique en cascade pour remplacer les changements de page traditionnels, mais pour les sites Web des développeurs, la réduction des pages peut rendre impossible l'affichage d'informations plus pertinentes. La plus évidente est la réduction des publicités.

3. Comment écrire un flux en cascade et ses principes

À quoi ressemble exactement un flux en cascade Écrivons maintenant une disposition simple du flux en cascade. Commençons par trier les styles et mises en page de base compliqués ~ Afin d'économiser de l'espace, nous ne mettrons pas en retrait ici ~

CSS :

*{margin: 0;padding: 0;}  
#wrap{width: 840px;margin: 0 auto;border: 1px solid black;overflow: hidden;}
#wrap ul{width: 200px;margin: 0 5px;float: left;}
#wrap ul li{width: 200px;list-style: none;margin: 10px 0;background: palegreen;font-size: 50px;color: white;text-align: center;}

HTML :

<p id="wrap">
  <ul></ul>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</p>

Voici le code JS simple :

var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//声明元素块
//先创建一个随机数的函数
function ranDom(min,max){
  return Math.random()*(max-min+1)+min;
}
//再创建一个添加li的函数
function createLi(num){
  for(var i=0;i<num;i++){
    var newLi=document.createElement("li");//创建li
    newLi.style.height=ranDom(100,400)+"px";//使用随机数函数创建高度不同的li
    var arrul=[];
//将ul的高度进行储存和比较
    for(var j=0;j<ul.length;j++){
      arrul.push(ul[j].offsetHeight);//储存ul的高度
    }
    var minHeight=arrul[0];
    var minIndex=0;
    for(var k=0;k<arrul.length;k++){
      if(minHeight>arrul[k]){
        minHeight=arrul[k];//比较出高度最短的ul然后赋值给minHeight
        minIndex=k;//把高度最短的ul所在下标赋值给minIndex
      }
    }
  ul[minIndex].appendChild(newLi);//向高度最短的ul里添加li
  }  
}
createLi(15);//执行函数，添加15个li，
//创建一个滚动事件
window.onscroll=function(){ 
// html总高度-可视化窗口高度=body的滚动高度
//兼容写法 
  var scrollTop=document.body.scrollTop; 
  var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; 
  if(document.documentElement.offsetHeight-clientHeight<=scrollTop){ 
    createLi(15); 
  } 
}
//当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的li

De cette façon, nous avons obtenu une disposition de flux en cascade de chargement automatique où le pied de page ne sera jamais vu.

4. Résumé

En termes simples, le flux en cascade est le contenu inégal ajouté entre plusieurs conteneurs à hauteur variable dans le conteneur de page lorsque la souris fait défiler les données en continu. l'extrémité du conteneur, et chargez-le automatiquement dans la position vacante, qui est la position avec la hauteur la plus courte dans l'exemple, et faites un cycle en continu.

Le flux en cascade est efficace et attrayant pour l'affichage des images. Le mode de lecture rapide où les utilisateurs peuvent numériser d'un seul coup d'œil peut obtenir plus d'informations en peu de temps, tandis que le chargement automatique en flux en cascade évite le problème de l'opération de rotation des pages. clic de souris de l'utilisateur.

La principale caractéristique du flux en cascade est qu'il est bien proportionné. La conception à largeur fixe mais non à hauteur fixe rend la page différente du mode de mise en page d'image matricielle traditionnel et utilise intelligemment la hiérarchie visuelle. le flux aléatoire de la vue soulage la fatigue visuelle, tout en donnant aux gens une sensation éclectique.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à l'implémentation JavaScript du flux en cascade et des effets de chargement, veuillez faire attention au site Web PHP chinois !