javascript 简单的瀑布流

﹏ヽ暗。殇╰゛Y 2024-02-17 15:16 69阅读 0赞

刚开始接触js，就想写写经典的瀑布流，搜了下网上的教程，发现大多是用jquery写的，非常简单，用它也不用考虑兼容性的问题（jquery已经考虑到了），就想自己用原生的js写个简单的瀑布流模型，暂且没有考虑到拖动时自动排版的情形，以后再添加。（发现用原生的js果然步骤比较多啊！很多方法都很底层的！）

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>waterfall flow</title>
    		<style type="text/css" > 
    		    body{margin:0px;} 
    		    #main{width:840px;margin:0 auto;} 
    		    .flow{float:left;width:200px;margin:5px;background:#ABC;} 
    		</style> 
    		</style>
    
    	</head>
    	<body>
    		<div id="main">
    			<div class="flow" ></div>
    			<div class="flow" ></div>
    			<div class="flow" ></div>
    			<div class="flow" ></div>
    		</div>
    	</body>
    	<script type="text/javascript">
    	    
    	    var flowlist = null;
    
    	    if(document.getElementsByClassName){
    			var flowlist = document.getElementsByClassName("flow");
    		} else{
    			/* 考虑IE的兼容性 */
    			var flowlist = getMElementsByClassName("div","flow");
    		}
    
    		/* 初始化 */
    		addItems(flowlist,3);
    
    		function getMElementsByClassName (tagname,classname) {
    			var res = [];
    			var elements = document.getElementsByTagName("div");
    			for (var i = 0,len = elements.length; i < len; i++) {
    				if(elements[i].className == classname)
    					res.push(elements[i]);
    			};
    			return res;
    		}
    		
    		function addItems(elements,times){
    			for (var j = 0; j < times; j++) {
    				for (var i = 0,len = elements.length; i < len; i++) {
    					var newnode = document.createElement("div");
    					newnode.style.background="#159";  
    	           		newnode.style.width="90%";
    	           		newnode.style.height=getRandom(200,300)+"px";
    	          		newnode.style.margin="10px";  
    					elements[i].appendChild(newnode);
    				};
    			};
    		}
    
    		/* 考虑兼容性，使用document.documentElement.scrollTop
    		   使用DOM0事件 */
    		window.onscroll = function(){
    			 // 被卷去的高度	
    			 var scrollTop = document.documentElement.scrollTop;
    			 // 页面高度
    			 var pageHeight = 	document.body.scrollHeight;
    			 // 可视区域高度 
    			 var viewHeight =  window.screen.availHeight;
    			 console.log("被卷去的高度:"+scrollTop + " "+"页面高度:"+pageHeight+" "+"可视区域高度:"+viewHeight);
    			 //当滚动到底部时 
                if((scrollTop+viewHeight)>(pageHeight-20)){ 
                    if(scrollTop<10000){//防止无限制的增长 
                        addItems(flowlist,2);
                    } 
                } 
    		}
    
    		function getRandom(min,max){ 
            	//x上限，y下限  
            	var x = max;  
            	var y = min;  
            	if(x<y){ 
                	x=min; 
                	y=max; 
            	} 
            	var rand = parseInt(Math.random() * (x - y + 1) + y); 
            	return rand; 
        	}
    
    	</script>
    </html>

效果图：

![Center][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/3efbad435c6c406a8a8661cb24549aef.png