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 基于原型的对象(创建、调用)
Oct 16 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
vue上传图片组件编写代码
Jul 26 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
浅谈python的dataframe与series的创建方法
2018/11/12 Python
将python图片转为二进制文本的实例
2019/01/24 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
食堂个人先进事迹
2014/01/22 职场文书
社会公德演讲稿
2014/05/20 职场文书
个人担保书范文
2014/05/20 职场文书
预备党员综合考察材料
2014/05/31 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
求职自我推荐信
2015/03/24 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers