jQuery implementiert dynamische Ladeeffekte von list content_jquery

Wenn Sie Jquery verwenden, um den dynamischen Aktualisierungseffekt von Listendaten zu implementieren, können die aktualisierten Daten die von Ajax angeforderten Daten sein.

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>

Anbei ist der Demoeffekt http://demo.jb51.net/js/2015/jquery-dtlb

Ist der Effekt nicht großartig? Schauen wir uns als Nächstes die Implementierungsideen des Wasserfallflusses und des JS-Codes zur Steuerung des dynamischen Ladens an

Der folgende Code wird hauptsächlich zur Steuerung des Ladeereignisses beim Herunterziehen der Bildlaufleiste verwendet

Schreiben Sie in der folgenden Codebeschreibung einfach Ihren Vorgang, ob es sich um das Laden von Bildern oder das Laden aufgezeichneter Daten handelt

Vergessen Sie nicht, die JQuery-Klassenbibliothek zu zitieren

 $(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);

  }
 });

Analyse:

Um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht, müssen Sie drei Attributwerte des DOM verwenden, nämlich scrollTop, clientHeight und scrollHeight.
scrollTop ist der Scrollabstand der Bildlaufleiste auf der Y-Achse.
clientHeight ist die Höhe des sichtbaren Inhaltsbereichs.
scrollHeight ist die Höhe des sichtbaren Bereichs des Inhalts plus der Überlaufdistanz (Scrolldistanz).
Aus der Einführung dieser drei Eigenschaften können wir ersehen, dass die Bedingung, dass die Bildlaufleiste den unteren Rand erreicht, scrollTop clientHeight == scrollHeight ist. (Kompatibel mit verschiedenen Browsern).