解释javascript实现瀑布流的绝对布�

瀑布流已经流行了几年。首先是Pinterest掀起的浪潮，然后国内设计如雨后春笋般出现，瀑布流的例子也很多，比如蘑菇街，马克的(虽然最近涉及色情，但好像喝过茶)，淘宝的“Wow”。这些都是很好的例子，今天我们就来说说瀑布流。一、绝对布局：

JS的实现原理。

其实瀑布式的主要难点是如果图片在对应的栏目下排列整齐，什么时候开始刷新加载图片。而图片有序排列的主要逻辑和算法是得到容器中可以放多少列，然后通过计算，存储第一列的高度，再遍历剩余的高度(第一列的元素除外)，分别放入高度最小的列中。逐一添加，最后结束遍历。设置开始刷新非常简单。瀑布刷新只与一个事件相关，即window.onscroll主要算法是在页面滑动到最低高度时开始加载节点并添加。当然，增加的节点数量不是固定的。让我们从代码开始。我会分三个部分来说明，一个是图片的排列，一个是加载位置的设置，一个是增加一个响应式加载。

1.图片的排列。

var $=function(){ return document . queryselectorall . apply(document，arguments)；} var arr height=[]；//获取列高var columns=function() {//计算页面上最多可以放置多少列var容器w=$ ('# main') [0]。clientwidth，pinw=$('。引脚')[0]。偏移；返回数学. floor(containerW/PinW)；} var getIndex=function(arr) {//获取最小高度var min haut=math . min . apply的索引(null，arr)；//获取(var I in arr){ if(arr[I]==Minh ight){ return I；} } }//根据列数确定img第一行的高度，放入数组。set center=(function(){//按列数设置宽度var main=$(' # main ')[0]；//获取覆盖层var getPadding=function() {//设置padding var col=columns()；//获取最后一列varpadding=main . client width-col * $('。引脚')[0]。偏移；返回填充/2；} var getcomputed style=function(ele){//支持兼容IE if(window . getcomputed style){ return window . getcomputed style(ele)；} else { return ele.currentStyle}} var getPinPad=function() {//获取pin var pin=$('的填充值。pin ')[0]；返回parseInt(getComputedStyle(pin)。padding left)；} return function() {//设置宽度main . style . padding=` 0 $ { getpadding()} px0 $ { getpadding()-getpinpad()} px `；} })();var overload=function(ele){ var index=get index(arrheight)，Minh haven=math . min . apply(null，arr height)，//get最小高度pins=$(')。pin’)，style=ele.stylestyle.position=“绝对”；style.top=minHeight ' px//设置当前元素样式的高度。左=引脚[索引]。offsetleft ' pxarrHeight[index]=ele . offset theight；}//执行函数varinit=function () {varpins=$('。pin ')、col=columns()在初始化期间；setCenter()；//设置包装容器的宽度(var i=0，pin引脚=引脚[I]；I) {if (i col) {//存储第一行的高度arrheight。推(销。右偏)；} else { overLoad(引脚)；//重新排列元素的位置}}}有7个函数(大型函数)和一个变量。说说思路。首先，onload之后执行的函数是init。你知道，js程序必须有它的入口，关键取决于你如何找到它。然后我们深入init函数体并观察。在init中执行的业务逻辑是存储第一行元素的高度，然后重新排列剩余的元素。通过columns函数获取当前窗口中可以放下的最大列数，然后设置容器的中心(只需通过填充设置即可)。接下来，遍历pin的单位框，将第一行的元素高度存储在arrHeight数组中，并重新排列剩余的元素。其他功能觉得没必要解释。让我们把重点放在overLoad函数上。

var overload=function(ele){ var index=get index(arrheight)，Minh haven=math . min . apply(null，arr height)，//get最小高度pins=$(')。pin’)，style=ele.stylestyle.position=“绝对”；style.top=minHeight ' px//设置当前元素样式的高度。左=引脚[索引]。offsetleft ' pxarrHeight[index]=ele . offset theight；} overLoad中有一个getIndex函数，用来获取最小高度的Index，然后可以设置传入ele元素的位置(绝对定位)。top是数组中最小高度的px值，left是第一行中设置的索引元素的左边距位置。最后更新一下高度，好！够了。3 .设置装载位置。

var dataInt=[{ 'src': '1.jpg' }，{ 'src': '2.jpg' }，{ 'src': '3.jpg' }，{ 'src': '4.jpg' }，{ ' src ' : ' 1 . jpg ' }，{ 'src': '2.jpg' }，{ 'src': '3 .is load(){//可以加载var scroll top=document . document element . scroll top | | document . body . scroll top，whole height=document . document element . client height | | document . body . client height，point=scrollTop wholeHeight//从页面底部到标题var arr=$('的距离。pin’)；var lastHei=arr[arr.length - 1]。getBoundingClientRect()。顶部；返回(最后一点)？真：假；}//句柄滑动var deal scroll=(function(){ var main=$(' # main ')[0]，标志=truereturn function() { if (isLoad)(标志){ for (var i=0，数据；data=DataInt[I]；){ var div=document . create element(' div ')；div . innerhtml=temp(data . src)；div.className=' pinmain . appendchild(div)；overLoad(div)；//和上面的重载有耦合属性} flag=falseSetTimeout(函数(){//控制骑手的速度。时间越长，速度对滑行时间的影响越大。flag=true}, 200);} } })();函数temp(src){ return ` div class=' box ' img src=' http :http://cued . Xun lei.com/demos/publ/img/P _ 00 $ { src } '//div `；}其实本质在最后一部分。这只是加载数据的一种手段。当然，您可以单击加载(手动触发)或其他加载方法。当然，如何设置完全取决于你。所以，随大流，还是靠滑滚装。继续，找到入口函数-dealScroll。这个函数执行的任务是判断是否可以通过isload函数加载。我们来看看isload函数，这是滚动加载的关键点。

is load(){//可以加载var scroll top=document . document element . scroll top | | document . body . scroll top，whole height=document . document element . client height | | document . body . client height，point=scrollTop wholeHeight//从页面底部到标题var arr=$('的距离。pin’)；var lastHei=arr[arr.length - 1]。getBoundingClientRect()。顶部；返回(最后一点)？真：假；}通过计算，将页面底部到视口(工具栏下部)的位置与最后一个元素的绝对位置进行比较。如果滑动距离超过，则启用加载。是啊~结束了。返回交易卷轴。下一步是看装载部分。其实这部分没什么好说的，就是创建一个div节点，然后放在容器的末尾，通过overLoad函数处理节点的位置。另外，在函数的最后，我设置了一个技巧来控制滑动速度。通过节流功能，我可以防止请求太慢，用户重复发送请求，造成资源浪费。那么，这部分也可以告一段落了。4.响应的最后一部分是响应。这部分也超级简单。只要做好封装，其实这部分就是添加一个resize事件并结束。让我们继续寻找入口函数。

var resize=(function(){ var flag；返回函数(fn) { clearTimeout(标志)；flag=setTimeout(function(){//function被节流，防止用户过度移动fn()；console.log('ok') }，500)；}})();同样，这里使用了函数节流的思想。你知道，作为一个程序员，你永远不要认为用户不能做任何愚蠢的事情。例如，拖动浏览器窗口进行播放、放大、缩小和放大.其实我也经常这样，因为我没有女朋友，写代码写累了就拖浏览器玩。所以考虑到我们单身狗的需求，使用功能节流是非常必要的。感兴趣的童鞋，可以参考我之前的文章进行学习。请注意，这里的回调函数指的是init函数，但是需要对init进行一些更改。看到没。

Var update=function(ele) {//调整大小时，重置ele . style . position=' initial '；}//执行函数varinit=function () {varpins=$('。pin ')、col=columns()在初始化期间；arr height=[]；//清空高度设置中心()；//设置包装容器的宽度(var i=0，pin引脚=引脚[I]；I) {if (i col) {//存储第一行的高度arrheight。推(销。右偏)；更新(pin)；} else { overLoad(引脚)；//重新排列元素的位置}}}您需要添加update来更新新元素的第一行。然后可以直接移动使用。这绝对是大部分布局。javascript瀑布的另一种布局请参考下一篇文章《详解javascript实现瀑布流列式布局》。