快捷導(dǎo)航

jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入特效

更新時間：2015年08月08日 11:07:49 投稿：hebedich

這里給大家分享的是使用jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入的特效，效果相當(dāng)棒，后面附上瀑布流的實現(xiàn)思路和關(guān)鍵代碼，有需要的小伙伴可以參考下。

采用Jquery實現(xiàn)的列表數(shù)據(jù)動態(tài)更新效果，更新的數(shù)據(jù)可以是ajax請求的數(shù)據(jù)。

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>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
  <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</span> </div>
 </div>
 </div>
</div>
<p style="text-align:center;"><a href="javascript:void(0);" onClick="ListView.Update();">刷新數(shù)據(jù)</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>四川省，成都市，錦江區(qū)</span> <span>詳細(xì)說明</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.jb51.net/js/2015/jquery-dtlb

效果是不是非常棒呢，接下來我們再來看看瀑布流的實現(xiàn)思路和js控制動態(tài)加載的代碼

下面的代碼主要是控制滾動條下拉時的加載事件的

在下面代碼說明出，寫上你的操作即可，無論是加載圖片還是加載記錄數(shù)據(jù) 都可以

別忘了引用jquery類庫

 $(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if (scrollTop + windowHeight == scrollHeight) {

  //此處是滾動條到底部時候觸發(fā)的事件，在這里寫要加載的數(shù)據(jù)，或者是拉動滾動條的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

  }
 });

解析：

判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。
scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內(nèi)容可視區(qū)域的高度。
scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動）的距離。
從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。（兼容不同的瀏覽器）。

您可能感興趣的文章: