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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
967 个函式
2006/10/09 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
python实现图片转字符小工具
2019/04/30 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
pycharm永久激活超详细教程
2020/10/29 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
室内设计专业个人的自我评价
2013/10/19 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
妈妈活动方案
2014/08/15 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
导游词之凤凰古城
2019/10/22 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技