Waterfall 레이아웃_javascript 기술의 JavaScript 구현에 대한 자세한 설명

본 글에서는 javascript Waterfall 레이아웃 관련 내용을 소개하고, 참고하실 수 있도록 공유해 드립니다

.

JS 원칙

위에서 언급했듯이 열 레이아웃은 단순히 절대 레이아웃입니다. 절대 레이아웃은 하루에 10위안을 지불하는 벽돌공과 같습니다. 기둥 레이아웃은 그가 벽돌을 옮기는 것을 지켜보는 감독관입니다. 그들은 모두 벽돌을 옮기고 있는데, 한 사람은 열심히 일하고 있고, 다른 한 사람은 그의 IQ를 자랑하고 있습니다. 간단히! ! !
이 말을 듣고 나면 암울한 삶을 직시해보자.
열 레이아웃의 원리는 실제로 절대 레이아웃과 크게 다르지 않습니다.
세 부분도 있는데, 하나는 적응형 페이지 로딩, 다른 하나는 슬라이딩 로딩, 세 번째는 반응형 레이아웃입니다.
별도로 설명함:

1. 적응형 로딩

먼저 코드를 살펴보겠습니다.

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

프로그램을 보면 먼저 진입 기능을 찾아보세요. 당연히 처음에 onload가 되어 있어야 합니다. 그 다음에는 총 4가지 기능이 있다는 것을 알 수 있습니다.
사용자의 너비가 확실하지 않기 때문에 열 수도 확실하지 않습니다. 이때 실제 크기를 구한 후 계산을 해야 합니다. 그런 다음 원본 데이터를 다시 정렬해야 합니다.
따라서 getHtml은 처음부터 원본 데이터(innerHTML)를 가져오는 것입니다.
그런 다음 너비가 더 넓은 열을 추가할 수 있습니다.
createCol 함수는 열을 추가하기 위해 너비가 더 넓습니다.
이때 각 열의 높이를 저장하기 위한 배열(arrHeight)이 필요합니다(기본값은 0).
그런 다음 페이지를 다시 정렬할 수 있습니다 =>reloadImg(arrHtml), arrHtml은 원본 데이터입니다.
자, 여기로 이동하는 기본 벽돌을 완성했습니다.
다음으로 강화를 시작할 차례입니다.

2. 슬라이딩 로딩

본인이 직접 복사한 것으로 간주해야 기능이 잘 작성되어 있고 재사용성이 뛰어납니다.

코드를 보여주세요

 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, 동일한 dealScroll 논리. 여기서 설명해야 할 것은 createArticle은 가장 낮은 높이의 열에 벽돌을 추가하는 함수라는 것입니다.
그러면 더 이상 없습니다.

3. 반응형 레이아웃

이것도 직접 복사했습니다.

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

onload, dealScroll 및 resize 세 가지 함수 뒤에 "return this"를 추가했다는 점에 유의해야 합니다. 목적은 후속 재사용 요구 사항에 대비하기 위해 체인 호출을 활성화하는 것입니다.

위 내용은 이 글의 전체 내용입니다. JavaScript Waterfall Flow를 배우는 모든 분들에게 도움이 되기를 바랍니다.