Penjelasan terperinci tentang pelaksanaan JavaScript kemahiran layout_javascript air terjun

Artikel ini memperkenalkan kandungan yang berkaitan susun atur air terjun javascript dan berkongsi dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

Prinsip JS

Seperti yang dinyatakan di atas, reka letak lajur hanyalah reka letak mutlak Susun atur mutlak adalah seperti tukang batu yang berharga 10 yuan/hari. Susun atur lajur ialah penyelia yang berdiri di situ memerhatikan dia memindahkan batu bata. Mereka semua juga bergerak batu bata, seorang melakukan kerja keras, dan seorang lagi menunjukkan IQnya. Mudah sahaja! ! !
Selepas mendengar ini, mari kita hadapi kehidupan yang suram.
Prinsip susun atur lajur sebenarnya tidak jauh berbeza dengan susun atur mutlak.
Terdapat juga tiga bahagian, satu memuatkan halaman penyesuaian, satu lagi memuatkan gelongsor, dan yang ketiga ialah susun atur responsif.
Diterangkan secara berasingan:

1. Pemuatan penyesuaian

Mari kita lihat kodnya dahulu:

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

Apabila anda melihat program, mula-mula cari fungsi kemasukannya. Jelas sekali, ia sepatutnya onload pada mulanya, kemudian, perhatikan fungsi onload Anda boleh mendapati terdapat 4 fungsi di dalamnya.
Oleh kerana lebar pengguna tidak pasti, bilangan lajur kami juga tidak pasti. Pada masa ini, anda perlu mendapatkan saiz sebenar dan kemudian melakukan pengiraan. Kemudian data asal perlu disusun semula.
Oleh itu, getHtml adalah untuk mendapatkan data asal (innerHTML) dari awal; Kemudian anda boleh menambah lajur dengan lebih lebar.
Fungsi createCol lebih lebar untuk menambah lajur.
Pada masa ini, kita memerlukan tatasusunan (arrHeight) untuk menyimpan ketinggian setiap lajur (lalai ialah 0).
Kemudian anda boleh menyusun semula halaman =>reloadImg(arrHtml), arrHtml ialah data asal.
Okey, kami telah menyelesaikan pergerakan bata asas di sini.
Seterusnya, sudah tiba masanya untuk mula mengukuhkan.

2. Pemuatan gelongsor

Ini harus dianggap salinan langsung oleh saya, jadi fungsi ini ditulis dengan baik dan kebolehgunaan semula adalah hebat.

tunjukkan kod kepada anda

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

Isload yang sama, logik tatal tawaran yang sama. Apa yang perlu dijelaskan di sini ialah createArticle ialah fungsi yang menambah batu bata pada lajur ketinggian terendah.

Kemudian, tiada lagi.

3. Reka letak responsif

Saya juga menyalin ini secara langsung.

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

Perlu diambil perhatian bahawa untuk tiga fungsi onload, dealScroll, dan resize, saya menambah "return this" selepasnya. Tujuannya adalah untuk membolehkan panggilan berantai bersedia untuk keperluan kebolehgunaan semula berikutnya.

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari aliran air terjun javascript.