phpcms 列表页实现 瀑布流加载的步骤:
1、引入 jquery.js
2、引入 idangerous.swiper.js
3、在文件底部加上一下代码 注意其中的 DOM元素
$(document).ready(function(){
var request;
var sentIt = true;
$(window).bind("scroll",function(){
var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 200);
if (closeToBottom) {
var nextHref = $(".pagenum .rh a").attr("href")
if(nextHref !="" && nextHref != undefined) {
if(sentIt){
request = $.ajax({
url: nextHref,
cache: false,
type: "GET",
beforeSend: function(){
sentIt = false;
$(".page_loading").text("正在努力加载……");
$(".page_loading").show("fast");
},
success: function(data) {
result = $(data).find(".modlenews li");
var nextHref2 = $(data).find(".pagenum .rh a").attr("href");
$(".pagenum").remove();
$(".modlenews").append(result);
console.log("nextHref2!=nextHref",nextHref2,nextHref)
if(nextHref2 !=""&& nextHref2!=nextHref){
nextHref = "";
$('.modlenews').append($(data).find(".pagenum"));
$(".pagenum .rh a").attr("href", nextHref2);
nextHref = nextHref2;
}
else{
$(".pagenum").remove();
nextHref = "";
}
},
complete: function(){
setTimeout(function(){sentIt = true}, 1500);
},
error: function(){
$(".page_loading").text("请求失败了!");
$(".page_loading").show("fast");
setTimeout("$('.page_loading').remove()",1100);
setTimeout("$('.page_loading').hide()",1000);
}
})
}
}
else {
$(".page_loading").text("已经是最后一页了!");
$(".page_loading").show("fast");
//setTimeout("$(.page_loading').hide()",1000);
//setTimeout("$('.page_loading').remove()",1100);
}
}
});
})
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。