Detailed explanation of JavaScript implementation of waterfall layout_javascript skills

This article introduces the relevant content of javascript waterfall layout and shares it with everyone for your reference. The specific content is as follows

JS Principles

As mentioned above, the column layout is simply an absolute layout. An absolute layout is like a bricklayer who costs 10 yuan/day. The column layout is the supervisor standing there watching him move bricks. They are all also moving bricks, one is doing hard work, and the other is showing off his IQ. Simply! ! !
After listening to this, let’s face the bleak life.
The principle of column layout is actually not much different from absolute layout.
There are also three parts, one is adaptive page loading, the other is sliding loading, and the third is responsive layout.
Explained separately:

1. Adaptive loading

Let’s take a look at the code first:

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 alt="Detailed explanation of JavaScript implementation of waterfall layout_javascript skills" >/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;
    }
})();

When you see a program, first look for its entry function. Obviously, it should be onload at the beginning. Then, observe the onload function. You can find that there are a total of 4 functions in it.
Since the user's width is not certain, our number of columns is not certain either. At this time, you need to obtain the actual size and then perform a calculation. Then the original data needs to be rearranged.
Therefore, getHtml is to get the original data (innerHTML) from the beginning;
Then you can add columns with more width.
The createCol function is more wide-width to add columns.
At this time, we need an array (arrHeight) to save the height of each column (the default is 0).
Then you can rearrange the page =>reloadImg(arrHtml), arrHtml is the original data.
Okay, we have completed the basic brick moving here.
Next, it’s time to start strengthening.

2. Sliding loading

This should be considered a direct copy by me, so the function is well written and the reusability is great.

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

Same isload, same dealScroll logic. What needs to be explained here is that createArticle is a function that adds bricks to the lowest height column.
Then, there is no more.

3. Responsive layout

I also copied this directly.

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

It should be noted that for the three functions onload, dealScroll, and resize, I added "return this" after them. The purpose is to enable chain calls to prepare for subsequent reusability needs.

The above is the entire content of this article. I hope it will be helpful for everyone to learn JavaScript waterfall flow.