Implémentation d'une disposition de flux en cascade basée sur les compétences JavaScript (2)

L'exemple de cet article explique le code détaillé de l'implémentation JavaScript de la disposition du flux en cascade et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

1. Créer un modèle HTML

L'idée est d'abord d'utiliser un conteneur div pour contenir tout le contenu, puis la boîte div est utilisée pour placer l'image, et enfin la div box_border est utilisée comme cadre d'image. Le code est le suivant

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>瀑布流</title>
</head>
<body>
  <div class="container" id="container">
    <div class="box_border" id="box_border">

      <div class="box" id="box1">
        <img src="image/01.jpg">
      </div>
  <!--把Box复制多份,这里因为代码重复省略了-->
    </div>
  </div>
</body>
</html>

Copier après la connexion

2. Définissez simplement les styles via CSS

Définissez principalement le placement horizontal, la couleur du cadre photo, la bordure, etc.

/*
边界不留空,背景黑灰
*/
body{
  margin: 0px;
  background: darkgray;
}
/*
总布局设置为相对布局
*/
.container{
  position: relative;
}
/*
设置box属性
*/
.box{
  padding: 5px;
  float: left;
}
/*设置图片边框阴影和圆角
*/
.box_border{
  padding: 5px;
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 5px #ccc;
  border-radius: 5px;
}
/*设置图片格式*/
.box_border img{
  width: 150px;
  height: auto;
}

Copier après la connexion

3.JS contrôle le nombre d'images placées dans chaque ligne

Après la disposition CSS ci-dessus, la taille de la fenêtre du navigateur change et le nombre d'images à l'intérieur changera également. Nous devons maintenant utiliser JS pour corriger le nombre d'images dans chaque ligne, ce qui peut obtenir de bons résultats pour les écrans. de différentes tailles

/*
 用于加载其他函数
 */
window.onload = function(){
  setImgLocation("container");
}
/*
 设置图片个数
 */
function setImgLocation(parent){
  var cparent = document.getElementById(parent);//得到父节点
  var childArray = getChildNodes(cparent);//得到图片数量
  var imgWidth = childArray[0].offsetWidth;//获取照片宽度
  var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
  var count = Math.floor(screenWidth/imgWidth);//每行的个数
  cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中

}


/*
 获取全部图片的个数
 */
function getChildNodes(parent){
  var childArray =[];//定义一个数组存放图片box
  var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
  //循环添加class为box的节点
  for(var i = 0;i<tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}
注意:针对不同屏幕大小显示的个数是不一样的

Copier après la connexion

4.JS implémente un flux de cascade statique

Implantez d'abord une mise en page statique, c'est-à-dire que le navigateur n'actualisera pas automatiquement les nouvelles images lors du retrait
. Implémenter l'algorithme de permutation est très simple

1. Enregistrez toutes les hauteurs de la première rangée d'images dans un tableau
2. Calculez la hauteur minimale et la position correspondante de l'image dans la première rangée
3. Placez la première photo après la première rangée à cette position
4. Réinitialisez la hauteur de la position à la somme des deux images
5. Bouclez toutes les images restantes en 2

Code :

/*
 用于加载其他函数
 */
window.onload = function(){
  setImgLocation("container");
}
/*
 设置图片个数及位置排列
 */
function setImgLocation(parent){
  var cparent = document.getElementById(parent);//得到父节点
  var childArray = getChildNodes(cparent);//得到图片数量
  var imgWidth = childArray[0].offsetWidth;//获取照片宽度
  var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
  var count = Math.floor(screenWidth/imgWidth);//每行的个数
  cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
  //定义数组,存放第一行照片高度
  var imgHArray = [];
  //循环遍历图片
  for(var i=0;i<childArray.length;i++){
    //如果图片在第一行则获取高度
    if(i<count){
      imgHArray[i] = childArray[i].offsetHeight;
    }else//否则把最小高度的填充剩余图片
    {
      var minHeight = Math.min.apply(null,imgHArray);//获取最小高度
      var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标
      childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
      childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度
      childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
      imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
      //开始下一轮循环
    }

  }

}
/*
 获取最小高度对应的下标
 */
function getMinIndex(minHeight,imgHArray){
  for(var i in imgHArray){
    if(imgHArray[i] == minHeight){
      return i;
    }
  }
}
/*
 获取全部图片的个数
 */
function getChildNodes(parent){
  var childArray =[];//定义一个数组存放图片box
  var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
  //循环添加class为box的节点
  for(var i = 0;i<tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}

Copier après la connexion

5.js réalise le chargement dynamique

Le chargement dynamique signifie que la barre de défilement ne glisse jamais vers le bas. Pour résoudre le chargement dynamique, nous devons considérer deux problèmes :
1). Quand charger
Distance coulissante Hauteur du navigateur> La distance entre la dernière image et le haut
2). Comment charger
En créant un nouveau nœud, ajoutez-y le nœud créé
Code final :

/*
 用于加载其他函数
 */
window.onload = function() {
  var cparent = document.getElementById("container");//得到父节点
  setImgLocation(cparent);
  //设置加载的图片
  var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg",
    "image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];
  //滑动监听
  window.onscroll = function () {
    if (checkLoad(cparent)) {
      for (var i = 0; i < data.length; i++) {
        //创建新的节点
        var div1 = document.createElement("div");
        div1.className = "box";
        var div2 = document.createElement("div");
        div2.className = "box_border";
        var img = document.createElement("img");
        img.className = ".box_border img";
        img.src = data[i];
        div2.appendChild(img);
        div1.appendChild(div2);
        cparent.appendChild(div1);
      }
      setImgLocation(cparent);//创建节点后重新排列
    }
  }
}


/*
检查是否应该加载
 */
function checkLoad(cparent){
  var childArray = getChildNodes(cparent);//得到图片个数
  var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度
  var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离(浏览器兼容性真烦人)
  var browserHeight = document.documentElement.clientHeight;//获得浏览器高度
  if(lastImgHight < scrollHeight+browserHeight){//判断是否加载
    return true;
  }else {
    return false;
  }
}
/*
 设置图片个数及位置排列
 */
function setImgLocation(cparent){

  var childArray = getChildNodes(cparent);//得到图片数量
  var imgWidth = childArray[0].offsetWidth;//获取照片宽度
  var browserWidth = document.documentElement.clientWidth;//获取浏览器宽度
  var count = Math.floor(browserWidth/imgWidth);//每行的个数
  cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
  //定义数组,存放第一行照片高度
  var imgHArray = [];
  //循环遍历图片
  for(var i=0;i<childArray.length;i++){
    //如果图片在第一行则获取高度
    if(i<count){
      imgHArray[i] = childArray[i].offsetHeight;
    }else//否则把最小高度的填充剩余图片
    {
      var minHeight = Math.min.apply(null,imgHArray);//获取最小高度
      var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标
      childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
      childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度
      childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
      imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
      //开始下一轮循环
    }

  }

}
/*
 获取最小高度对应的下标
 */
function getMinIndex(minHeight,imgHArray){
  for(var i in imgHArray){
    if(imgHArray[i] == minHeight){
      return i;
    }
  }
}
/*
 获取全部图片的个数
 */
function getChildNodes(parent){
  var childArray =[];//定义一个数组存放图片box
  var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
  //循环添加class为box的节点
  for(var i = 0;i<tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.