瀑布流

你的名字 2022-03-20 03:40 324阅读 0赞

瀑布流经过几经波折终于完成，完了就总结一下，可以帮助更多的人。（具体瀑布流布局，可百度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>

发表评论取消回复

表情：

评论列表（有 0 条评论，324人围观）

还没有评论，来说两句吧...

相关阅读

相关手写瀑布流—345等高瀑布流布局

1.初始布局 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

古城微笑少年丶/ 2023年01月18日 09:17/ 0 赞/ 145 阅读

相关手写瀑布流—1.瀑布流介绍

1.瀑布流介绍 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

偏执的太偏执、/ 2023年01月18日 09:15/ 0 赞/ 53 阅读

相关 css瀑布流

简单效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

忘是亡心i/ 2022年12月20日 12:43/ 0 赞/ 194 阅读

相关瀑布流+搜索

选项卡形式的，左边是图片瀑布流，右边是视频瀑布流 <template> <view>  <logi

你的名字/ 2022年11月21日 04:05/ 0 赞/ 191 阅读

相关 js 原生瀑布流布局，瀑布流布局

HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

左手的ㄟ右手/ 2022年05月16日 08:41/ 0 赞/ 310 阅读

相关瀑布流

什么是瀑布流? 演示效果点[这里][Link 1]。瀑布流呢,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪

今天药忘吃喽~/ 2022年03月24日 21:16/ 0 赞/ 325 阅读

相关【python】瀑布流

前端HTML ![复制代码][copycode.gif] {% load tags %} <!DOCTYPE html> <html lang

谁借莪１个温暖的怀抱￠/ 2022年03月22日 12:59/ 0 赞/ 243 阅读

相关瀑布流

瀑布流经过几经波折终于完成，完了就总结一下，可以帮助更多的人。（具体瀑布流布局，可百度jquery-masonry.js） 1>>首先就是一个窗口的滚动条是否接近页面底部的一

你的名字/ 2022年03月20日 03:40/ 0 赞/ 325 阅读

相关 jQuery图片瀑布流

> 很早之前就听说过瀑布流布局，瀑布流布局能够降低页面的复杂度，对用户也比较友好，但它也有局限，对于一些页面差异比较大的页面或内如不是一种很好的选择。推荐大家看一下瀑布流鼻

た入场券/ 2022年03月16日 08:24/ 0 赞/ 331 阅读

相关瀑布流布局

1、点击取消就刷新，防止模板不刷新导致bug 2、循环元素，if(第一排) else(其他排) 3、数组arr存放第一排高度 4、获取arr最小值height以及索

喜欢ヅ旅行/ 2022年01月07日 18:45/ 0 赞/ 362 阅读