Detaillierte Erläuterung der JavaScript-Implementierung der Wasserfall-Layout_Javascript-Fähigkeiten

Dieser Artikel stellt den relevanten Inhalt des Javascript-Wasserfall-Layouts vor und teilt ihn als Referenz mit allen. Der spezifische Inhalt ist wie folgt

JS-Prinzipien

Wie oben erwähnt, ist das Spaltenlayout einfach ein absolutes Layout. Ein absolutes Layout ist wie ein Maurer, der 10 Yuan/Tag kostet. Das Säulenlayout zeigt den Vorgesetzten, der da steht und ihm beim Verschieben der Steine ​​zuschaut. Sie alle bewegen auch Steine, einer leistet harte Arbeit und der andere stellt seinen IQ zur Schau. Einfach! ! !
Nachdem wir uns das angehört haben, schauen wir uns dem trostlosen Leben ins Auge.
Das Prinzip des Spaltenlayouts unterscheidet sich eigentlich nicht wesentlich vom absoluten Layout.
Es gibt auch drei Teile: Der eine ist das adaptive Laden der Seite, der andere das gleitende Laden und der dritte das responsive Layout.
Separat erklärt:

1. Adaptives Laden

Werfen wir zunächst einen Blick auf den 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;
    }
})();

Wenn Sie ein Programm sehen, suchen Sie zunächst nach seiner Einstiegsfunktion. Beachten Sie dann die Onload-Funktion.
Da die Breite des Benutzers nicht sicher ist, ist auch unsere Spaltenanzahl nicht sicher. Zu diesem Zeitpunkt müssen Sie die tatsächliche Größe ermitteln und dann eine Berechnung durchführen. Dann müssen die Originaldaten neu angeordnet werden.
Daher dient getHtml dazu, die Originaldaten (innerHTML) von Anfang an abzurufen Dann können Sie Spalten mit mehr Breite hinzufügen.
Die Funktion „createCol“ ist breiter, um Spalten hinzuzufügen.
Zu diesem Zeitpunkt benötigen wir ein Array (arrHeight), um die Höhe jeder Spalte zu speichern (der Standardwert ist 0).
Dann können Sie die Seite neu anordnen =>reloadImg(arrHtml), arrHtml sind die Originaldaten.
Okay, wir haben den grundlegenden Umzug hierher abgeschlossen.
Als nächstes ist es an der Zeit, mit der Stärkung zu beginnen.

2. Gleitendes Laden

Dies sollte von mir als direkte Kopie betrachtet werden, daher ist die Funktion gut geschrieben und die Wiederverwendbarkeit großartig.

Zeige deinen 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;
    }
  })();

Gleiches Isload, gleiche DealScroll-Logik. Was hier erklärt werden muss, ist, dass createArticle eine Funktion ist, die Steine ​​zur Spalte mit der niedrigsten Höhe hinzufügt.

Dann gibt es nichts mehr.

3. Responsives Layout

Das habe ich auch direkt kopiert.

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

Es ist zu beachten, dass ich nach den drei Funktionen „onload“, „dealScroll“ und „resize“ „return this“ hinzugefügt habe. Der Zweck besteht darin, Kettenaufrufe zu ermöglichen, um sich auf spätere Wiederverwendbarkeitsanforderungen vorzubereiten.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen des Javascript-Wasserfallflusses hilfreich sein wird.