jQuery实现列表内容的动态载入特效


Posted in Javascript onAugust 08, 2015

采用Jquery实现的列表数据动态更新效果,更新的数据可以是ajax请求的数据。

CSS:

.main {
 width: 100%;
 margin-top: 100px;
 text-align: center;
 font-size: 12.5px;
}

th, td {
 border: 1px solid #ccc;
 line-height: 40px;
 padding-left: 5px;
}
.item:hover {
 background-color: #efefef;
}
.item:nth-child(2n) {
 background-color: #efefef;
}
.ListView {
 width: 600px;
 overflow: hidden;
 margin: 0 auto;
 padding: 10px;
 height:372px;
 border: 1px solid #dddddd;
}
.ListView .c {
 width: 1200px;
 margin: 0 auto;
 border-collapse: collapse;
}
.Item {
 border-bottom: 1px dashed #dddddd;
 padding: 10px 0 10px 0;
 overflow: hidden;
 margin-left:600px;
}
.Item span {
 float: left;
 text-align: left;
}
.Item span:first-child {
 color: #6AA8E8;
}
.Item span:last-child {
 text-align: center;
}

HTML

<div class="main">
 <div class="ListView">
  <div class="c">
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>
 </div>
 </div>
</div>
<p style="text-align:center;"><a href="javascript:void(0);" onClick="ListView.Update();">刷新数据</a></p>

JS

<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
 ListView.Init();
});
var ListView={
 Init:function(){
 $(".Item span").css("width",$(".ListView").width()/4+"px");
 for(var i=0;i<$(".Item").length;i++){
 var target=$(".Item")[i];
 $(target).animate({marginLeft:"0px"},300+i*100);
 }
 },
 Update:function(){
 $(".ListView .c .Item").remove();
 for(var i=0;i<10;i++){
 var newItem=$("<div class=\"Item\"> <span>test</span> <span>男/"+i+"</span> <span>四川省,成都市,锦江区</span> <span>详细说明</span> </div>");
 $(newItem).find("span").css("width",$(".ListView").width()/4+"px");
 $(".ListView .c").append(newItem);
 $(newItem).animate({marginLeft:"0px"},300+i*100);
 }
 }
}
</script>

附上演示效果 http://demo.3water.com/js/2015/jquery-dtlb

效果是不是非常棒呢,接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码

下面的代码主要是控制滚动条下拉时的加载事件的

在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 

别忘了引用jquery类库

$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if (scrollTop + windowHeight == scrollHeight) {

  //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

  }
 });

解析:

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

Javascript 相关文章推荐
javascript常用对话框小集
Sep 13 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 #Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
You might like
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php去除数组中重复数据
2014/11/18 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
javascript数组去重小结
2016/03/07 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
django自带调试服务器的使用详解
2019/08/29 Python
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
心理健康课教学反思
2014/02/13 职场文书
新年主持词
2014/03/27 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
务工证明怎么写
2015/06/18 职场文书
总经理年会致辞
2015/07/29 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
Golang并发工具Singleflight
2022/05/06 Golang