新葡亰496net Web前端 基于jQuery瀑布流的功能应用-Web前端之家

基于jQuery瀑布流的功能应用-Web前端之家

瀑布流,大家肯定不陌生。瀑布流,又称瀑布流式布局,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

新葡亰496net,一、瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能!

新葡亰,它的优点就是第一次打开页面的时候,只有加载首屏的数据,这样提高了网站打开速度,用户体验非常不错。我们经常见到很多网站的瀑布流功能,如淘宝、京东这些商品等等。

引言:我们经常见到很多网站的瀑布流功能,如淘宝、京东这些商品等等..

我们实现瀑布流功能,三个点必须要掌握的:获取到数据、排列的方式,如何实现排列。OK,接下来一起慢慢学习“干货“吧。

实现它我们首先考虑几个问题:1、获取到数据 2、排列的方式
3、如何实现排列

这是html的布局,css布局可以自己设置,只要保证grid盒子有绝对定位,其父元素有相对定位即可!后面有参考代码

其实,在瀑布流里有个核心的功能就是用到了绝对定位

这种方式,可以通过for循环按照顺序获取图片的索引值,然后不断的更改其css样式中的top值和left值!

这是html的布局,css布局可以自己设置,只要保证grid盒子有绝对定位,其父元素有相对定位即可!后面有参考代码

在我们获取图片的资源时,有的时候图片的高度是不一致的,如果一直按照顺序排列,最后的图片显示,排列不整齐,就会效果不佳!

下面是script部分

我们可以通过另一种方法,来实现图片插入当前列最短的一列,可以解决这个问题!

这种方式,可以通过for循环按照顺序获取图片的索引值,然后不断的更改其css样式中的top值和left值!

下面我们来主要看一下jquery的代码:

在我们获取图片的资源时,有的时候图片的高度是不一致的,如果一直按照顺序排列,最后的图片显示,排列不整齐,就会效果不佳!

好了,现在我们已经通过两种方式解决了瀑布流这个问题,但是我们还有个问题没有解决,那就是做瀑布流很大的原因是因为图片的量比较大,我们一个一个写html是不是有点太low了!

我们可以通过另一种方法,来实现图片插入当前列最短的一列,可以解决这个问题!

下面介绍一种利用引擎模板来获取json后台的数据的方式,实现这个问题!

下面我们来主要看一下jquery的代码:

1、我们只需要搭建一个html盒子即可!

好了,现在我们已经通过两种方式解决了瀑布流这个问题,但是我们还有个问题没有解决,那就是做瀑布流很大的原因是因为图片的量比较大,我们一个一个写html是不是有点太low了!

2、盒子搭建好了,数据要获取啊,就靠它!

下面介绍一种利用引擎模板来获取json后台的数据的方式,实现这个问题!

3、这是两个js库,在网上可下载到!

1、我们只需要搭建一个html盒子即可!

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图