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.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임을 알 수 있습니다. (다른 브라우저와 호환 가능).