欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-07-13 作者:羯瑞。♑ 来源:转载
这篇文章主要为大家详细介绍了原生js+jquery+css3实现瀑布流的相关代码,三种实现瀑布流的方法,感兴趣的小伙伴们可以参考一下

前言

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

原生javascript版




 
 瀑布流-javascript
 
 


 

jquery版本




 
 瀑布流-jquery
 
 
 


 

大致思路

1.先让第一行的浮动

2.计算第一行的每个块的高度

3.遍历第一行之后的每一个块,逐个放在最小高度的下面

4.加载数据插入最后,再重新计算

注意点

a.原生js

1.定义了getClassObj()函数用于获取class类的对象,方便调用。考虑了兼容性 getElementsByClassName

2.定义了getminHIndex()函数用户获取最小值的索引

3.设置块与块之间的距离最好用padding,这样的话offsetHeight可以直接获取得到高度。如果设置margin则得多加个外边距的距离

4.代码中设置了定时器加载数据,其实可以省略,只要保证第一次加载的数据能满屏就可以。如果没出现滚动条的话onscroll事件是不会执行到的。也就没办法加载数据了

5.代码中的计算宽度也可以修改,设计的页面是定宽的瀑布流的话。这里主要是做了响应式的处理

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.每设置一块位移,都要在列高的数组上增加数值,防止块重叠

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;//添加后,更新最小列高 

b.jquery

1.思路是跟js一样的,只是jquery封装了很多方法,让我们简便的就实现了

2.注意width(),跟innerWidth()的区别。前者只能获取宽度值(不包括补白padding)

css3版本




 
 瀑布流-css3
 
 


 

注意点

1.滚动加载还是得另外加js

2.加载的数据,是竖向排列的。体验不是很友好

3.有兼容性问题,Internet Explorer 10 +

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐