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

来源：动视网责编：小采时间：2020-11-27 21:41:46

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

jQuery实现列表内容的动态载入特效_jquery:采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。 CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; li

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现列表内容的动态载入特效_jquery:采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。 CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; li

采用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

test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明 test 男/0 四川省，成都市，锦江区详细说明

刷新数据

附上演示效果 http://demo.jb51.net/js/2015/jquery-dtlb

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

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

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

别忘了引用jquery类库

解析：

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。（兼容不同的浏览器）。

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

推荐度：

点击下载本文 文档为doc格式

标签：特效实现 jQuery

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐