微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

CSS:

rush: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

rush:xhtml;">
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明
test 男/0 四川省,成都市,锦江区 详细说明

JS

附上演示效果

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

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

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

别忘了引用jquery类库

rush:js;"> $(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。(兼容不同的浏览器)。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐