How javascript achieves waterfall stream columnar layout _ javascript skills

This article mainly introduces two layout methods for implementing waterfall stream in javascript, one is absolute layout and the other is column layout. It introduces the principles of these two layout methods in detail, this article focuses on column layout. If you are interested, you can refer to this article to introduce Javascript waterfall stream columnar LayoutFor your reference, the details are as follows:

JS principles

As mentioned above, the columnar layout can be regarded as an absolute layout. The absolute layout is like a 10 yuan/day bricklayer. The columnar layout is the monitor standing there looking at his bricks. It is also an example of how hard work can be done, and how smart I can be shown. That's it !!!
After listening to the force, let's face the gloomy life.
The principle of columnar layout is actually not much different from that of absolute layout.
There are also three parts: one is adaptive page loading, the other is sliding loading, and the other is responsive layout.
Explanations:

1. adaptive loading

Let's take a look at the code first:

Var $ = function () {// A hacks return document. querySelectorAll. apply (document, arguments);} var waterFall = (function () {// initialize the layout var arrHeight = []; // The column height var columns = function () {// calculate the maximum number of columns on the page. var bodyW =$ ('# iner') [0]. clientWidth, pinW = $ (". column ") [0]. offsetWidth; return Math. floor (bodyW/pinW);} // set the waterfall stream center var getHtml = function () {var cols = $ ('. column '), // obtain the existing number of columns. arrHtml = []; for (var I = 0, col; col = cols [I ++];) {var htmls = col. innerHTML. match (// gi); // obtain the arrHtml = arrHtml of columns. concat (htmls);} return arrHtml;} // obtain the lowest height in the array var getMinIndex = function () {// obtain the index var minHeight = Math. min. apply (null, arrHeight); // obtain the minimum height for (var I in arrHeight) {if (arrHeight [I] === minHeight) {return I ;}}} var createCol = function () {var cols = columns (), // obtain the number of columns contain = $ ("# container") [0]; contain. innerHTML = ''; // clear the data for (var I = 0; I <cols; I ++) {var span = document. createElement ("span"); span. className = "column"; contain. appendChild (span) ;}/// height of the initialization column var initHeight = function () {var cols = columns (), arr = []; for (var I = 0; I <cols; I ++) {arr. push (0);} arrHeight = arr;} // create an ele and add it to the smallest position 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;} // traverse the obtained html and add it to the page var reloadImg = function (htmls) {for (var I = 0, html, index; html = htmls [I ++];) {createArticle (html) ;}} var onload = function () {var contain =$ ("# container") [0], // obtain the container arrHtml = getHtml (); // obtain all the existing waterfall stream blocks // create columns, and then load createCol (); // initialize arrHeight initHeight (); // reloadImg (arrHtml); return this ;}})();

When I see a program, I first look for the entry function. Obviously, it should be onload at the beginning. So, observe the onload function. We can find that there are four functions in it.
The user's width is not sure, so the number of columns is not certain. At this time, you need to obtain the actual size and then perform a calculation. Then, you need to rearrange the original data.
Therefore, getHtml is used to obtain the original data (innerHTML) at the beginning );
Then you can add columns with a higher width.
The createCol function adds columns with a wider width.
At this time, we need an array (arrHeight) to save the height of each column (0 by default ).
Then we can rearrange the page => reloadImg (arrHtml). arrHtml is the original data.
Well, we have finished brick-and-mortar migration.
Next, we need to start reinforcement.

2. Slide Loading

This is something I copied directly, so the function is well written and reusable.

Show u code

Var isLoad = function () {// can I load var scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop, wholeHeight = document.doc umentElement. clientHeight | document. body. clientHeight, point = scrollTop + wholeHeight; // The distance from the bottom of the page to the header var lastHei = Math. min. apply (null, arrHeight); return (lastHei <point )? True: false;} var dealScroll = (function () {window. onscroll = () =>{ dealScroll ();} var container =$ ('# iner') [0]; return function () {if (isLoad ()) {for (var I = 0, html, data; data = dataInt [I ++];) {html = tpl. temp (data. src); // obtain the data and add the template createArticle (html) ;}return this ;}})();

The same isload and the same dealScroll logic. It should be noted that createArticle is the function for adding bricks to the lowest height column.
Then, there will be no more.

3. Responsive Layout

I copied the file directly.

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

It should be noted that the onload, dealScroll, and resize functions are added with "return this". The purpose is to perform chained calls for future reusability.

The above is all of the content in this article, hoping to help you learn javascript waterfall stream.