Explication détaillée de l'implémentation JavaScript des compétences Waterfall layout_javascript

Cet article présente le contenu pertinent de la mise en page en cascade javascript et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Principes JS

Comme mentionné ci-dessus, la disposition en colonnes est simplement une disposition absolue, c'est comme un maçon qui coûte 10 yuans/jour. La disposition en colonnes représente le superviseur qui se tient là et le regarde déplacer les briques. Ils déplacent tous également des briques, l'un travaille dur et l'autre montre son QI. Simplement! ! !
Après avoir écouté ceci, faisons face à la sombre vie.
Le principe de la disposition en colonnes n’est en réalité pas très différent de la disposition absolue.
Il y a également trois parties, l'une est le chargement adaptatif des pages, l'autre est le chargement coulissant et la troisième est la mise en page réactive.
Expliqué séparément :

1. Chargement adaptatif

Jetons d'abord un coup d'œil au code :

var $ = function() { //一个hacks
  return document.querySelectorAll.apply(document, arguments);
}
var waterFall = (function(){
  //初始化布局
  var arrHeight = []; //列的高度
  var columns = function() { //计算页面最多可以放多少列
      var bodyW = $('#container')[0].clientWidth,
        pinW = $(".column")[0].offsetWidth;
      return Math.floor(bodyW / pinW);
    }
    //设置瀑布流居中
  var getHtml = function() {
      var cols = $('.column'), //获得已有的列数
        arrHtml = [];
      for (var i = 0, col; col = cols[i++];) {
        var htmls = col.innerHTML.match(/<img(&#63;:.|\n|\r|\s)*&#63;p>/gi); //获取一个columns的
        arrHtml = arrHtml.concat(htmls);
      }
      return arrHtml;
    }
    //获得数组中最低的高度
  var getMinIndex = function() { //获得最小高度的index
    var minHeight = Math.min.apply(null, arrHeight); //获得最小高度
    for (var i in arrHeight) {
      if (arrHeight[i] === minHeight) {
        return i;
      }
    }
  }
  var createCol = function() {
      var cols = columns(), //获得列数
        contain = $("#container")[0];
      contain.innerHTML = ''; //清空数据
      for (var i = 0; i < cols; i++) {
        var span = document.createElement("span");
        span.className = "column";
        contain.appendChild(span);
      }
    }
    //初始化列的高度
  var initHeight = function() {
      var cols = columns(),
        arr = [];
      for (var i = 0; i < cols; i++) {
        arr.push(0);
      }
      arrHeight = arr;
    }
   //创建一个ele并且添加到最小位置
  var createArticle = function(html){
    var cols = $('.column'),
      index = getMinIndex(),
      ele = document.createElement('article');
    ele.className = "panel";;
    ele.innerHTML = html;
    cols[index].appendChild(ele);
    arrHeight[index] += ele.clientHeight;
  }
  //遍历获得的html然后添加到页面中
  var reloadImg = function(htmls) {
    for (var i = 0, html, index; html = htmls[i++];) {
      createArticle(html);
    }

  }
  var onload = function() {
      var contain = $("#container")[0], //获得容器
        arrHtml = getHtml(); //获得现有的所有瀑布流块
      //创建列，然后进行加载
      createCol();
      //初始化arrHeight
      initHeight();
      //进行页面的重绘
      reloadImg(arrHtml);
      return this;
    }
})();

Lorsque vous voyez un programme, recherchez d'abord sa fonction d'entrée. Évidemment, il doit être onload au début. Ensuite, observez la fonction onload. Vous pouvez constater qu'il contient un total de 4 fonctions.
Puisque la largeur de l’utilisateur n’est pas certaine, notre nombre de colonnes ne l’est pas non plus. A ce stade, vous devez obtenir la taille réelle puis effectuer un calcul. Ensuite, les données originales doivent être réorganisées.
Par conséquent, getHtml consiste à récupérer les données originales (innerHTML) depuis le début
 ; Ensuite, vous pouvez ajouter des colonnes avec plus de largeur.
La fonction createCol est plus large pour ajouter des colonnes.
À ce stade, nous avons besoin d'un tableau (arrHeight) pour enregistrer la hauteur de chaque colonne (la valeur par défaut est 0).
Ensuite, vous pouvez réorganiser la page =>reloadImg(arrHtml), arrHtml correspond aux données d'origine.
D'accord, nous avons terminé le déplacement de la brique de base ici.
Ensuite, il est temps de commencer à se renforcer.

2. Chargement coulissant

Cela devrait être considéré comme une copie directe par moi, donc la fonction est bien écrite et la réutilisabilité est excellente.

montre ton code

 var isLoad=function() { //是否可以进行加载
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
      point = scrollTop + wholeHeight; //页面底部距离header的距离
    var lastHei = Math.min.apply(null,arrHeight);
    return (lastHei < point) &#63; true : false;
  }

  var dealScroll = (function(){
    window.onscroll = ()=>{dealScroll();}
    var container = $('#container')[0];
    return function(){
      if(isLoad()){
        for(var i = 0,html,data;data = dataInt[i++]; ){
          html = tpl.temp(data.src); //获得数据然后添加模板
          createArticle(html);
        }
      }
      return this;
    }
  })();

Même isload, même logique dealScroll. Ce qu'il faut expliquer ici, c'est que createArticle est une fonction qui ajoute des briques à la colonne la plus basse.
Ensuite, il n'y en a plus.

3. Mise en page réactive

J'ai aussi copié ceci directement.

 var resize = (function(){
    window.onresize = ()=>{resize();};
    var flag;
    return function(){
      clearTimeout(flag);
      flag = setTimeout(()=>{onload();},500);
      return this;
    }

Il convient de noter que pour les trois fonctions onload, dealScroll et resize, j'ai ajouté "return this" après elles. Le but est de permettre les appels en chaîne pour préparer les besoins de réutilisation ultérieurs.

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 du flux de cascade Javascript.