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 相关文章推荐
jquery下json数组的操作实现代码
Aug 09 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
Ajax基础知识详解
Feb 17 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
使用python实现扫描端口示例
2014/03/29 Python
Python lxml模块安装教程
2015/06/02 Python
利用python如何处理nc数据详解
2018/05/23 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python实现图片添加文字
2019/11/26 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
安全教育感言
2014/03/04 职场文书
选秀节目策划方案
2014/06/06 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
就业协议书怎么填
2014/09/15 职场文书
学生打架检讨书
2014/10/20 职场文书
投资申请报告
2015/05/19 职场文书
高二语文教学反思
2016/02/16 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python