新捕京77555com

新捕京77555com
NEWS
资讯观点

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

编辑:网站开发 | 浏览量: | 来源:网站开发 | 更新时间:2021-07-12 | 当前栏目:新捕京77555com
瀑布流效果顾名思义,就是像瀑布一样模拟水流的方向由上到下的将图片慢慢的加载展示出来。瀑布流分为等高瀑布流和等宽瀑布流;瀑布流的应用场景常见于对多图片的展示,为了缓解服务器的压力,将图片分批进行展示;就拿百度图片来说,应用的就是等高瀑布流的展示效果;所有的图片高度相同;随着浏览器的下拉,当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 建站技术
热门城市网站建设
沙市网站建设 谷城网站建设 南漳网站建设 长阳网站建设 蔡甸网站建设 罗田网站建设 沙洋网站建设 孝南网站建设 秭归网站建设 江汉网站建设 京山网站建设 兴山网站建设 东西湖网站建设 赤壁网站建设 点军网站建设 通城网站建设 洪山网站建设 襄城网站建设 通山网站建设 咸丰网站建设 黄梅网站建设 浠水网站建设 洪湖网站建设 铁山网站建设 石首网站建设 江夏网站建设 华容网站建设 利川网站建设 钟祥网站建设 云梦网站建设 乳源网站建设 从化网站建设 海珠网站建设 罗湖网站建设 龙岗网站建设 新丰网站建设 盐田网站建设 曲江网站建设 金平网站建设 黄埔网站建设 光明新网站建设 萝岗网站建设 宝安网站建设 金湾网站建设 澄海网站建设 仁化网站建设 潮南网站建设 南海网站建设 白云网站建设 始兴网站建设 顺德网站建设 花都网站建设 番禺网站建设 福田网站建设 荔湾网站建设 龙华新网站建设 浈江网站建设 潮阳网站建设 乐昌网站建设 天河网站建设 东安网站建设 华容网站建设 鼎城网站建设 安乡网站建设 会同网站建设 麻阳网站建设 汉寿网站建设 永兴网站建设 鹤城网站建设 邵阳网站建设 邵东网站建设 绥宁网站建设 辰溪网站建设 珠晖网站建设 北湖网站建设 涟源网站建设 醴陵网站建设 炎陵网站建设 宁乡网站建设 韶山网站建设 沅陵网站建设 资阳网站建设 芦淞网站建设 临澧网站建设 天元网站建设 临武网站建设 岳塘网站建设 宁远网站建设 雨湖网站建设 慈利网站建设
新捕京77555com | 网站建设 | 微信开发 | H5制作 | 网络营销 | 案例展示 | 资讯中心 | 文字版官网| 米拓模版标签在线手册
136-2726-6633 / 027-82756-772

地址:武汉市解放大道1328号中原大厦1806室

E-mail:wuhan1806@163.com;QQ:6686935

本网站所刊载信息,不代表盈科互动观点,部分信息及数据来源于互联网,如果侵犯您的权益,请速与大家联系。
Copyright ? 2006- 盈科动力(vikasp.net) 版权所有-鄂ICP备13002765号-1技术支撑:新捕京77555com

在线
客服

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

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

  • 网站建设
  • 小程序开发
  • APP开发
  • 品牌设计
  • SEO优化
  • 售后支撑

电话
咨询

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

136-2726-6633
项目经理手机

微信
咨询

加微信获取报价
顶部
XML 地图 | Sitemap 地图