瀑布流

瀑布流经过几经波折终于完成，完了就总结一下，可以帮助更多的人。（具体瀑布流布局，可百度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); //beg
				var hm=url.substring(plen, url.length); //end
				var 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); //beg
				var hm=url.substring(plen, url.length); //end
				var 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>