jQuery는 list content_jquery의 동적 로딩 효과를 구현합니다.-JS 튜토리얼-php.cn

jQuery는 list content_jquery의 동적 로딩 효과를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:46:17

원래의

1253명이 탐색했습니다.

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>

로그인 후 복사

<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.jb51.net/js/2015/jquery-dtlb

효과가 훌륭하지 않나요? 다음으로는 Waterfall Flow의 구현 아이디어와 동적 로딩을 제어하는 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임을 알 수 있습니다. (다른 브라우저와 호환 가능).