Pure js implémente la disposition du flux en cascade et ajax ajoute dynamiquement des compétences data

Cet article utilise du code js pur pour écrire à la main un effet de page Web de flux en cascade, réalisant initialement une disposition de base du flux en cascade et simulant les données ajax en chargeant une nouvelle fonction d'image après avoir fait défiler vers le bas.

Inconvénients :

1. Le programme n'est pas réactif et ne peut pas ajuster la largeur de la page en temps réel

2. Après avoir ajouté des images de données de simulation ajax au programme, toutes les images de la page entière seront repositionnées.

3. Le programme attend que toutes les images soient chargées avant de lire la taille de l'image. Cela ne peut pas être fait en pratique.

4. Dans les projets réels, la valeur de la taille de l'image doit être donnée par le programme d'arrière-plan et l'attribut width de l'image doit être utilisé directement dans le code js.

L'idée de ce programme :

Structure HTML :

<body>
  <div id="container">
    <div class="box">
      <div class="box_img">
        <img src="img/1.jpg" />
      </div>
    </div>
    <div class="box">
      <div class="box_img">
        <img src="img/2.jpg" />
      </div>
    </div>
    ...
  </div>
</body>

Copier après la connexion

1. Disposition d'initialisation

1. Définissez #container sur position:relative;

2. Définissez .box sur float:left;

3. Positionnez toutes les images une fois la page Web chargée ;

　3.1 La largeur de l'image est fixe. Calculez le nombre d'images pouvant être hébergées dans chaque ligne de la page actuelle, et obtenez la largeur du #container, puis définissez la page pour qu'elle soit centrée

　3.2 Parcourez toutes les images. Les premières images numériques sont par défaut flottantes comme première ligne et stockées dans le tableau BoxHeightArr = [];

3.3 Une fois la disposition de la première ligne terminée, organisez l'image suivante et mettez à jour BoxHeightArr[] :

　3.3.1 Placez l'image suivante sous l'image la plus courte de la première ligne (position utilisant position:absolute), c'est-à-dire la colonne avec la plus petite hauteur dans BoxHeightArr[], enregistrez la valeur d'index du nombre suivant : minIndex ;

　3.3.2 Mettre à jour la plus petite valeur dans BoxHeightArr[] (BoxHeightArr[minIndex]+hauteur de l'image actuelle) ;

　3.4 Répétez l'étape 3.3 jusqu'à ce que toutes les images soient disposées

2. Surveillez la hauteur de défilement en temps réel et déterminez s'il faut charger de nouvelles données

1. Une fois l'initialisation terminée, récupérez la hauteur de la dernière image à partir du haut : lastContentHeight

2. Utilisez window.onscroll = function(){...}

Le suivi en temps réel de la hauteur de défilement de la page actuelle est : scrollTop

La surveillance en temps réel de la hauteur actuelle de la fenêtre de la page est : pageHeight

3. Lorsque la page détecte : lastContentHeight < scrollTop + pageHeight, utilisez ajax pour obtenir les données json de l'image nouvellement ajoutée.

3. Nouveau contenu en bas de page

1. Utilisez une boucle pour créer d'abord un nouveau conteneur d'image, ajoutez-le en bas, puis écrivez les données d'image correspondantes telles que le chemin et d'autres informations dans les données json dans le conteneur pour terminer l'ajout de l'image.

2. Une fois toutes les nouvelles images ajoutées, réexécutez l'opération d'initialisation à l'étape 1 pour toutes les images et mises en page sur la page entière.

Dossier du projet :

index.html : pré-placez certaines données d'image

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script src="js/app.js"></script>
  <title>JavaScript瀑布流</title>
 </head>
 <body>
  <div id="container">
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
   
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
  
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
   
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
  </div>
 </body>
</html>

Copier après la connexion

style.css :

*{
 margin: 0;
 padding: 0;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
}
.box_img{
 padding: 5px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 150px;
 height: auto;
}

Copier après la connexion

app.js :

window.onload = function(){
 imgLocation("container", "box");
 //ajax模拟数据
 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]}
 
 window.onscroll = function(){
  if(checkFlag()){ //判断是否到底部要加载新的数据
   var cparent = document.getElementById("container");
   //把ajax数据加载进页面
   for(var i=0; i<imgData.data.length; i++){
    var ccontent = document.createElement("div");
    ccontent.className="box";
    cparent.appendChild(ccontent);
    var boximg = document.createElement("div");
    boximg.className = "box_img";
    ccontent.appendChild(boximg);
    var img = document.createElement("img");
    img.src = "img/"+imgData.data[i].src;
    boximg.appendChild(img);
   }
   //把所有图片数据重新定位一次
   imgLocation("container", "box");
  }
 }
};

function checkFlag(){
 var cparent = document.getElementById("container");
 var ccontent = getChildElement(cparent, "box");
 
 //得到最后一张图距顶部的高度，滚动高度，窗口高度
 var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
 console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
 
 if(lastContentHeight < scrollTop + pageHeight){
  return true;
 }
}

function imgLocation(parent, content){
 //将parent下所有的content全部取出
 var cparent = document.getElementById(parent);
 var ccontent = getChildElement(cparent, content);
 //根据当前浏览器窗口的宽度，确定每行图片数并固定，居中
 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border
 var num = Math.floor(document.documentElement.clientWidth / imgWidth);
 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";
 //alert("pause");
 //设置一个数组，用来承载第一行的图片信息
 var BoxHeightArr = [];
 for(var i=0; i<ccontent.length; i++){
  if(i<num){
   //第一行的图片的高度记录下来
   BoxHeightArr[i] = ccontent[i].offsetHeight;
   //当ajax数据加载后，程序是将所有图片重新定位，所以第一行的图片要清除position:absolute
   ccontent[i].style.position = "static";
  }else{
   var minHeight = Math.min.apply(null, BoxHeightArr);
   var minIndex = getminheightLocation(BoxHeightArr, minHeight);
   
   //把图放在第一行图索引值最小的下面
   ccontent[i].style.position = "absolute";
   ccontent[i].style.top = minHeight+"px";
   ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
   
   //图片放好位置后更新“第一行图片信息的最小高度”，
   //然后利用for循环重复这个动作到结束
   BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
  }
 }
;}

//获取第一行图片高度最小的索引值
function getminheightLocation(BoxHeightArr, minHeight){
 for(var i in BoxHeightArr){
  if(BoxHeightArr[i] == minHeight){
   return i;
  }
 }
}

//获取所有box
function getChildElement(parent, content){
 contentArr = parent.getElementsByClassName(content);
 return contentArr;
}

Copier après la connexion

Rendu :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.

Pure js implémente la disposition du flux en cascade et ajax ajoute dynamiquement des compétences data_javascript