本文介绍了javascript瀑布流列式布局的相关内容，分享给大家供大家参考，具体内容如下
js原理
上面说了，列式布局简直算是完虐绝对式布局. 绝对式布局，简直就像10元/天 的搬砖工。而列式布局就是站在那看他搬砖的监工。 同样都是搬砖的，一个卖苦力，一个秀智商。简直了！！！
听了逼逼，我们来直面一下惨淡的人生。
列式布局的原理其实和绝对式布局没有太大的却别。
同样也有3个部分， 一是页面加载自适应，二是滑动加载，三是响应式布局。
分别讲解:
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(//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 {resize();}; var flag; return function(){ cleartimeout(flag); flag = settimeout(()=>{onload();},500); return this; }
需要说明的是，onload,dealscroll,resize这3个函数，后面我都加上return this. 目的是可以进行链式调用，以备后面重用性的需要。
以上就是本文的全部内容，希望对大家学习javascript瀑布流有所帮助。