武汉网站建设
NEWS
新闻观点

瀑布流效果:jquery通过ajxa配合php后端怎么实现

作者:网站开发 | 浏览量: | 更新时间:2021-07-12 | 当前栏目:武汉网站建设
瀑布流效果顾名思义,就是像瀑布一样模拟水流的方向由上到下的将图片慢慢的加载展示出来。瀑布流分为等高瀑布流和等宽瀑布流;瀑布流的应用场景常见于对多图片的展示,为了缓解服务器的压力,将图片分批进行展示;就拿百度图片来说,应用的就是等高瀑布流的展示效果;所有的图片高度相同;随着浏览器的下拉,当Y轴下拉框触底的时候就加载更多的图片;等宽瀑布流从视觉角度来说,更接近于现实生活中的瀑布效果;每一个图片宽度相同,高度错落有致;比如,我们平时在展示网站建设案例的时候,就可以利用上;视觉上还是很不错的。效果如下:

等宽瀑布流效果

本期建站公司来分享的是:jquery通过ajxa配合php后端怎么实现瀑布流效果的?

首先,我们需要了解下瀑布流的实现原理是怎么样的?瀑布流效果实现的基本原理:随着页面的每次滚动触底操作触发ajxa向后台请求数据,然后将请求回来的数据渲染到页面上;每进行一次滚动触底事件的产生就发生一次ajxa数据请求,然后渲染数据;直到不在返回数据,则结束。所以基本步骤就是:1、判断页面触底;2、ajxa发送请求;3、处理数据,渲染页面;下面我们来一步步的进行实现。

在实现瀑布流效果之前,我们需要先准备好数据;这里的数据准备也就是php后端对数据的实现。数据读取的实现其实也就是从数据库中读取数据,然后通过ajxa请求返回给浏览器;其中要留意的是,在数据库查询数据的时候,每次查询的数据要保证不一样,我们就可以通过sql语句中limit来进行限制:比如说:(limit m n);m和n是通过get方式从前台传递过来的;n表示:每次请求多少个?m表示:每次从第几个开始读取?只要保证m不同,就可以保证读取的数据不同了。m和n的控制,既可以写在后台进行处理,也可以在前台进行处理;每请求一次数据,就对m进行操作:m=m+n;这样下次的m就是不一样的值了。数据准备好之后,就可以开始实现功能了。

PHP代码:

瀑布流php代码


下面我就上代码了

HTML+CSS代码:


HTML+CSS代码

html+css比较简单,就是定义一个存放图片的大容器;div.waterfall;每一个图片盒子会被追加到这个div里

瀑布流效果的实现是通过jquery来处理的;分为不同的步骤来进行实现:我们先定义基本需要的参数:比如显示的列数,列与列之间的距离、接收返回的数据等

定义基本参数


第一步:ajxa请求数据

ajxa请求数据
ajxa请求到的数据

通过ajxa我们可以通过php后台请求到数据库里的数据;需要根据自身需要的参数来进行返回:其中:m和n不可少;请求到数据了,就可以渲染到页面上了;

数据的渲染

通过上面可以得出,瀑布流效果的核心难点在于:如何对图片进行排列;其基本的逻辑就是,先对第一排进行布局;布局好第一排之后,准备布局第二排;第二排第一个摆放非常重;第二排的第一个要摆放在第一排中高度最低的一个;打个比方吧:第一排4个序号为:vik1,vik2,vik3,vik4;第一排布局好后,假如vik3的高度最低,那么第二排的vik5就摆放在vik3的下面了;这个时候,vik1,vik2,(vik3+vik5),vik4;这4个又形成了新的高度,这个时候对这个高度再进行判断,找出最低的那个,假如是:vik4;那么第二排的第二个vik6就会摆放到vik4的下面,这时候:vik1,vik2,(vik3+vik5),(vik4+vik6);又形成了新的高度....依次进行循环....就这样直到最后的一个图片摆放完成;首次渲染的效果就算完成了。通过getImageList();函数的调用就可以完成首次页面的渲染了。

第二步:浏览器触底实现数据加载

第二步:浏览器触底实现数据加载

页面触底的原理其实很简单:当可视区的高度+浏览器滚动条被卷进去的高度  == 整个页面的高度的时候,这个时候就表示页面触底了;每一次触底就发送依次ajax请求,根据不同的m值来获取不同的数据,然后通过showImg()函数的处理渲染到页面上;这里注意的时候,需要对m值进行处理:m=m+n;以保证每次请求到不同的数据;

为了缓解服务器的压力;我们还可以加入:图片懒加载的功能;

第三步:图片懒加载

第三步:图片懒加载


图片懒加载其目的就是为了缓解服务器的压力;分批请求的同时分配进行加载;可以先使用纯色的色块进行占位;当其中某一个元素到达可视区范围了,再将图片地址渲染上去;

经过以上的步骤,等宽瀑布流的功能就实现了。原创不易,各位看官烦请高抬贵手了,武汉建站公司小编感谢了!

温馨提示:

1、凡本网注明“来源:***(非盈科互动)”的作品,均转载自其它媒体,转载目的在于传递更多的信息,并不代表本网赞同其观点和对其真实性负责。

2、如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。

征稿启事:

为了更好的发挥盈科互动新闻资讯平台价值,促进诸位自身发展以及业务拓展,更好地为企业及个人提供服务,盈科互动诚征各类稿件,欢迎实力来稿。

文章TAG:

瀑布流 jquery php ajxa 建站技术
热门城市网站建设
湖北网站建设 武汉网站建设 黄石网站建设 十堰网站建设 宜昌网站建设 襄樊网站建设 鄂州网站建设 荆门网站建设 孝感网站建设 荆州网站建设 黄冈网站建设 咸宁网站建设 随州网站建设 广水网站建设 恩施网站建设 仙桃网站建设 潜江网站建设 天门网站建设 北京网站建设 东城网站建设 西城网站建设 崇文网站建设 宣武网站建设 朝阳网站建设 丰台网站建设 石景山网站建设 海淀网站建设 门头沟网站建设 房山网站建设 通州网站建设 顺义网站建设 昌平网站建设 大兴网站建设 怀柔网站建设 平谷网站建设 密云网站建设 延庆网站建设 上海网站建设 黄浦网站建设 卢湾网站建设 徐汇网站建设 长宁网站建设 静安网站建设 普陀网站建设 闸北网站建设 虹口网站建设 杨浦网站建设 闵行网站建设 宝山网站建设 嘉定网站建设 浦东新网站建设 金山网站建设 松江网站建设 青浦网站建设 南汇网站建设 奉贤网站建设 崇明网站建设 广东网站建设 广州网站建设 韶关网站建设 深圳网站建设 珠海网站建设 汕头网站建设 佛山网站建设 江门网站建设 湛江网站建设 茂名网站建设 肇庆网站建设 惠州网站建设 梅州网站建设 汕尾网站建设 河源网站建设 阳江网站建设 清远网站建设 东莞网站建设 中山网站建设 潮州网站建设 揭阳网站建设 云浮网站建设 湖南网站建设 长沙网站建设 株洲网站建设 湘潭网站建设 衡阳网站建设 邵阳网站建设 岳阳网站建设 常德网站建设 张家界网站建设 益阳网站建设 郴州网站建设 永州网站建设 怀化网站建设 娄底网站建设 湘西网站建设 安徽网站建设 合肥网站建设 亳州网站建设 芜湖网站建设 马鞍山网站建设 池州网站建设 黄山网站建设 滁州网站建设 安庆网站建设 淮南网站建设 淮北网站建设 蚌埠网站建设 宿州网站建设 宣城网站建设 六安网站建设 阜阳网站建设 铜陵网站建设 明光网站建设 天长网站建设 宁国网站建设 界首网站建设 桐城网站建设 潜山网站建设
本网站所刊载信息,不代表盈科互动观点,部分信息及数据来源于互联网,如果侵犯您的权益,请速与我们联系。
Copyright © 2006- 盈科动力(vikasp.net) 版权所有-鄂ICP备13002765号-1技术支持:武汉网站建设

在线
客服

技术在线服务时间:9:00-20:00

在盈科,您对接的直接是技术员,而非客服传话!

电话
咨询

027-8275-6772
7*24小时客服热线

136-2726-6633
项目经理手机

微信
咨询

加微信获取报价
顶部