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 相关文章推荐
JS计算网页停留时间代码
Apr 28 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
angularjs实现table增加tr的方法
Feb 27 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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 INI配置文件的解析实现分析
2011/01/04 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
python中import reload __import__的区别详解
2017/10/16 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
小学红领巾中秋节广播稿
2014/01/13 职场文书
活动策划邀请函
2014/02/06 职场文书
员工工作自我评价
2014/09/26 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
物业前台接待岗位职责
2015/04/03 职场文书