瀑布流

瀑布流经过几经波折终于完成，完了就总结一下，可以帮助更多的人。（具体瀑布流布局，可百度jquery-masonry.js）

1>>首先就是一个窗口的滚动条是否接近页面底部的一个js

$(window).bind("scroll",function(){    // 判断窗口的滚动条是否接近页面底部    if( $(document).scrollTop() + $(window).height() > $(document).height() - 50 ) {    getNext();    } });

2>>接着js截取

function getUrl(){    if(p<totalPage){ p++;if(url.indexOf("&p=")<0){url=url.concat("&p="+p);}else{var plen=url.indexOf("&p=")+3;var qm=url.substring(0, plen); //begvar hm=url.substring(plen, url.length); //endvar cs=hm.indexOf("&");if(cs<0){url=qm+p;}else{hm=hm.substring(cs,hm.length);url=qm+p+hm;}}}else{sta=1; //已经是最后一页了}    }

3>>然后使用ajax发送异步请求（*loop是div包含循环体的ID名，bumpuliuSearchRow是当前循环的class样式名）

function getNext(){getUrl();    if(sta!=1){     $.ajax({       url:url,         type:'POST',                cache:false,        async:false,        success:function(data){        result = $(data).find("#loop .bumpuliuSearchRow");        $("#loop").append(result);        getStyle();//调用自动获取图片高宽的js,来控制整体布局        }    });    }}

整个js如下：

<script type="text/javascript">  $(function(){    var sta=0; //是否最后一页状态  0：还有下一页 1:最后一页    var p=$("#p").val(); //当前第几页var totalPage=$("#totalPage").val(); //总页数var url=window.location.toString(); //当前url链接        function getUrl(){    if(p<totalPage){ p++;if(url.indexOf("&p=")<0){url=url.concat("&p="+p);}else{var plen=url.indexOf("&p=")+3;var qm=url.substring(0, plen); //begvar hm=url.substring(plen, url.length); //endvar cs=hm.indexOf("&");if(cs<0){url=qm+p;}else{hm=hm.substring(cs,hm.length);url=qm+p+hm;}}}else{sta=1; //已经是最后一页了}    }        $(window).bind("scroll",function(){    // 判断窗口的滚动条是否接近页面底部    if( $(document).scrollTop() + $(window).height() > $(document).height() - 50 ) {    getNext();    } });function getStyle(){$.getScript('js/dt.js',function(){  liuxiaofan();}); }function getNext(){getUrl();    if(sta!=1){     $.ajax({       url:url,         type:'POST',                cache:false,        async:false,        success:function(data){        result = $(data).find("#loop .bumpuliuSearchRow");        $("#loop").append(result);        getStyle();        }    });    }}$("#upload").click(function(){getNext();getStyle();});  });</script>

页面具体布局

<div id="loop">

    <div class="bumpuliuSearchRow" ><img src="xx" /></div>

    <div class="bumpuliuSearchRow" ><img src="xx" /></div>

    <div class="bumpuliuSearchRow" ><img src="xx" /></div>
</div>