介绍了javascript瀑布流布局的相关内容，并分享给大家参考。具体内容如下。

JS原理

如上所述，列布局只是一种绝对布局。绝对布局就像10元/天的瓦工。柱子的布局是站在那里看他的主管搬砖。他们也是搬砖的，一个卖苦力，一个显示智商。简直是！听完压力，让我们正视惨淡的人生。其实列式布局的原理和绝对式布局没有太大区别。还有三个部分，一是自适应页面加载，二是滑动加载，三是响应式布局。单独解释：

1.负载自适应。

先看代码，

var $=function(){//a hack return document . queryselectorall . apply(document，arguments)；} var FAilure=(function(){//初始化布局var arr height=[]；//列高var columns=function() {//计算页面上最多可以放置多少列varbodyw=$ ('# container') [0]。clientwidth，pinw=$('。列')[0]。偏移；返回math . floor(body w/PinW)；}//将瀑布流设置为center vargethtml=function(){ varcols=$('。列')，//获取现有的列数arrHtml=[]；for (var i=0，colcol=cols[I]；){ var html s=col . innerhtml . match(/img(？|n|r|s)*？p/gi)；//获取一列的arr HTMl=arr HTMl . concat(html s)；}返回arrHtml}//获取数组中的最低高度var getMinIndex=function() {//获取最小高度的索引var Minh have=math . min . apply(null，arr height)；//获取(var I in arr height){ if(arr height[I]==Minh ight){ return I；} } } var create col=function(){ var cols=columns()，//获取包含的列数=$(' # container ')[0]；contain.innerHTML=//清除(var i=0)的数据；我科尔；I){ var span=document . create element(' span ')；' column '；contain . appendchild(span)；} }//初始化列高度var init height=function(){ var cols=columns()，arr=[]；for(var I=0；我科尔；I){ arr . push(0)；} arrHeight=arr}//创建一个ele并将其添加到最小位置var create article=function(html){ var cols=$('。column ')，index=getminindex()，ele=document . create element(' article ')；ele.className=' panel；ele.innerHTML=htmlcols[索引]。append child(ele)；arr height[index]=ele . client height；}//遍历获得的html并将其添加到页面中。var reload img=function(html){ for(var I=0，html，indexhtml=html[I]；){ createArticle(html)；} } var onload=function(){ var contain=$(' # container ')[0]，//get container arrHTMl=getHTMl()；//获取所有已有的瀑布块//创建列，然后加载createCol()；//初始化arrHeight init height()；//重绘页面ReLoadIMg(ArrHTML)；归还这个；}})();当你看到一个程序时，首先寻找它的入口函数。显然，它应该在开始时加载。如果观察onload函数，可以发现里面有4个函数。因为用户的宽度是不确定的，所以列数是不确定的。这时，你需要得到实际尺寸，然后进行计算。然后我们需要重新排列原始数据。所以，getHtml就是一开始就获取原始数据(innerHTMl)；然后可以添加宽度更宽的列。COL函数更宽，可以添加列。此时，我们需要一个数组(arrHeight)来保存每一列的高度(默认值为0)。然后我们可以重新排列页面=reload img (arrhtml)，这是原始数据。好了，我们已经完成了初级砖的搬运。接下来，是时候开始加强了。

2.滑动加载。

我应该直接复制这个，所以函数写得很好，可重用性很好。

显示u代码

var isLoad=function() { //是否可以进行加载var滚动顶部=文档。文档元素。向上滚动| |文档。尸体。顶部滚动，整个高度=文档。文档元素。客户端高度| |文档。尸体。客户端高度，磅=scrollTop整体高度//页面底部距离页眉的距离var lastHei=Math.min.apply(null，arrHeight)；返回（最后一点)?真：假；} var交易滚动=(function(){ window。onscroll=()={ deal scroll()；} var container=$(" # container ")[0]；return function(){ if(IsLoad()){ for(var I=0，html，data data=DataInt[I]；){ html=TPL。临时(数据。src)；//获得数据然后添加模板创建文章(html)；} }返回此；} })();同样的是负载，同样的交易滚动的逻辑。这里需要说明的就是，创建文章就是给最低高度列添加砖块的函数。然后，就没有然后啦。

3、响应式布局

这个我也是直接复制过来的。

var resize=(function(){ window。onresize=()={ resize()；};定义变量标志；返回函数(){ clearTimeout(标志);flag=setTimeout(()={ onload()；},500);归还这个；}需要说明的是，加载，处理滚动，调整大小这3个函数，后面我都加上把这个还给我。目的是可以进行链式调用，以备后面重用性的需要。

以上就是本文的全部内容，希望对大家学习爪哇岛描述语言瀑布流有所帮助。