jquery - 加载更多的实现原理？？以下代码不是很明白
本文介绍了jquery - 加载更多的实现原理？？以下代码不是很明白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<div class="text_a2">
<ul class="download_box">
<li>
<div class="download_img">
<a>
<img src="images/down_ima01.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima02.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima03.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima04.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima05.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima06.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima04.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima05.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima06.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima01.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima02.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
<li>
<div class="download_img">
<a>
<img src="images/down_ima03.png">
</a>
<div class="download_text hidden">
<div class="download_l">
<p>电商系统源码</p>
<p>更新时间：2016-10-26</p>
<p class="download_green">下载次数:1002次</p>
</div>
<div class="download_r">
<a href="download_detail.html" >立即下载</a>
</div>
</div>
</div>
</li>
</ul>
<div class="more_box">
<img src="images/more2.png" class="more1 mpng">
</div>
</div><script type="text/javascript">
$(document).ready(function(e) {
$(".more1").hide();
var w=$(window).width();
var h=$(window).height();
var $category=$('.download_box li:gt(5)');
var index=$('.download_box li').length;
$category.hide();
if(index>6)
{
$(".more1").show();
}
else
$(".more1").hide();
var n=1;
$(".more1").click(function(){
$(".mpng").css("opacity","0");
var i=6+3*n;
var $category_next=$(".download_box li:lt("+i+")");
setTimeout(function(){
$category_next.show();
$(".mpng").css("opacity","1");
},1000);
n++;
if(6+3*(n-1)>=index)
{
$(".more1").hide();
}
}); });
$(function(){
var H=$(window).height();
var winBox=$("body").height();
$(window).scroll(function () {
if ($(window).scrollTop() >= winBox-H) {
setTimeout(function(){
$(".more1").click();
winBox=$("body").height();},2000);
}
})
})</script>
解决方案
$(window).scroll(function () {
if ($(window).scrollTop() >= winBox-H) {
setTimeout(function(){
$(".more1").click();
winBox=$("body").height();},2000);
}
})
})$(".more1").click();这个点击加载应该知道吧
然后就是，当页面滚动高度>= winBox-H时，触发点击加载
简单来说,滚动到相应地方就触发事件加载数据
这篇关于jquery - 加载更多的实现原理？？以下代码不是很明白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
