打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
phpcms 实现瀑布流
 
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);
                }
            }

           
               
    });
})

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
前端开发之弹出框系列教程五:Loading提示框
瀑布流布局与 jQuery Ajax 分页 | Kayo's Melody
loading
Promis.then()
制作一个自动刷新的脚本
无聊图集(2014-07-23)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服