瀑布流的实现方式原生js+jquery+css3

前言

项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的...

原生javascript版

rush:xhtml;"> <Meta charset="UTF-8"> 瀑布流-javascript

Box">

jquery版本

rush:xhtml;"> <Meta charset="UTF-8"> 瀑布流-jquery

Box">

大致思路 1.先让第一行的浮动 2.计算第一行的每个块的高度 3.遍历第一行之后的每一个块，逐个放在最小高度的下面 4.加载数据插入最后，再重新计算注意点

a.原生js

1.定义了getClassObj()函数用于获取class类的对象，方便调用。考虑了兼容性 getElementsByClassName 2.定义了getminHIndex()函数用户获取最小值的索引 3.设置块与块之间的距离最好用padding，这样的话offsetHeight可以直接获取得到高度。如果设置margin则得多加个外边距的距离 4.代码中设置了定时器加载数据，其实可以省略，只要保证第一次加载的数据能满屏就可以。如果没出现滚动条的话onscroll事件是不会执行到的。也就没办法加载数据了 5.代码中的计算宽度也可以修改，设计的页面是定宽的瀑布流的话。这里主要是做了响应式的处理

rush:js;"> var arrBox=getClassObj(parentID,childClass);// getClassObj()获取子class的数组 var iBoxW=arrBox[0].offsetWidth;// 获取瀑布流块的宽度 var num=Math.floor(document.documentElement.clientWidth/iBoxW);//计算窗口能容纳几列 oParent.style.width=iBoxW*num+'px';//设置父级宽度

6.每设置一块位移，都要在列高的数组上增加数值，防止块重叠

rush:js;"> arrBox[i].style.position='absolute';//设置绝对位移 arrBox[i].style.top=minH+'px'; arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接获取arrBox[minHIndex].offsetLeft arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高