js结合jquery实现的ajax瀑布流加载实例
来源:互联网 发布:linux在线安装gcc 编辑:程序博客网 时间:2024/05/17 02:49
一.js代码
ajax函数
//瀑布流数据var getData = function (i,url,name){ $.post(url,{p:i},function(data){ if(data.status){ if(data.list !==null) { $(name).before(data.list), $(name).val(data.page); } }else{ alert(data.info); } });}
前台代码
$(document).ready(function (){ var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度) var nScrollTop = 0; //滚动到的当前位置 var nDivHight = $("#masonry").height();//获取单个div元素的滚动条 这里如果需要获取窗口的滚动条的话,修改获取的滚动高度即可。 $("#masonry").scroll(function(){ nScrollHight = $(this)[0].scrollHeight; nScrollTop = $(this)[0].scrollTop; if(nScrollTop + nDivHight >= nScrollHight){ var page = $("#masonry_page").val(); getData(page,"/masonry/id/2","#masonry_page"); } }); });
html代码
<div id="masonry"> <input type="hidden" id="masonry_page" value="1"></div>
注释:后台代码自行书写吧,类似分页的实现方式比较简单,后台输出html的代码,前台直接接受并添加(json数据)。
分享:在这里博主给大家推荐一个账号管理工具了,如果有朋友账号太多,经常忘记密码,而且密码太过复杂记不住,那么你有福了。在这里给大家推荐一个网站 51PassWord,博主也在用,希望能够帮助到大家。
1 0
- js结合jquery实现的ajax瀑布流加载实例
- BlocksIt.js瀑布流插件结合ajax实现无限加载数据
- jQUery 中masonry与infinitescroll结合 实现瀑布流,下拉加载
- Ajax实现瀑布流图片加载
- AJAX+json+jquery实现预加载瀑布流布局
- JavaScript、jQuery、css3实现瀑布流加载
- AJAX实例--瀑布流
- php+jquery+ajax滚动条滚动到底部自动加载,简单实现瀑布流
- js实现瀑布流排序加载效果
- JS实现无限加载瀑布流
- AJAX 的简单实例 (JS实现 和JQuery 实现)
- JS实现的瀑布流
- ajax瀑布流加载技术
- jq.ajax+php+mysql实现瀑布流缓冲加载数据
- Ajax +Jq+php实现的瀑布流翻页,加载中动画
- jquery实现瀑布流
- JQuery实现瀑布流
- jQuery实现瀑布流
- 【VS2015 MFC】bitmap图片加载实现进度条变化
- 《海潮之声》
- C#中Gdal读取SHP文件
- Swift - 按钮(UIButton)的用法
- 蓝桥杯 ALGO-148 算法训练 5-1最小公倍数
- js结合jquery实现的ajax瀑布流加载实例
- 第五届省赛javaB组--生命之树
- ATM金融行业密钥原理讲述与技术详解
- 抽象类和接口的区别
- bin目录的区别
- 谁该吃药了(线性判别法LDA小故事)
- 【easyui学习笔记】2.easyui拖放-1
- Git 常用命令总结
- Mybatis 中,#{ } 与 ${ } 的区别