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);
                }
            }

           
               
    });
})