zoukankan      html  css  js  c++  java
  • 简单瀑布流封装

    function createLi(){
    		var oLi=document.createElement('li');
    		oLi.style.height=parseInt(50+Math.random()*400)+'px';
    		oLi.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')';
    		return oLi;
    	};
    
    	function rnd(n,m){   
    		return parseInt(Math.random()*(m-n+1)+n);
    	};
    
    	window.onload=function(){
    		oDiv=document.getElementById('div1');
    		var aUl=oDiv.children;
    
    		function create(){
    
    			for(var i=0; i<20; i++){
    				var oLi=createLi();
    				var arr=[];
    
    				for(var j=0; j<aUl.length; j++){
    					arr[j]=aUl[j];
    				};
    
    				arr.sort(function(oUl1,oUl2){
    					return oUl1.offsetHeight-oUl2.offsetHeight;
    				});
    
    				arr[0].appendChild(oLi);
    			}
    		};
    
    		create();
    
    		window.onscroll=function(){
    			var winH=document.documentElement.clientHeight;
    			var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    			var scrollHeight=document.body.scrollHeight;
    
    			if(scrollTop>=scrollHeight-winH-200){
    				create();
    			}
    		}
    	}
    

      以上代码 是简单的瀑布流的封装代码 ,这里做的是滚动的时候随机出不同的颜色,

    效果是这样的,大家可以试一下


    如果问题,欢迎大家及时指点,一同交流,共同提高
  • 相关阅读:
    Eclipse 如何安装反编译插件
    java下执行mongodb
    如何利用Xshell在Linux下安装jdk
    asp.net signalR
    手机抓包 fiddler magicwifi
    NServiceBus 消息
    .net 异步函数 Async await
    .net 任务(Task)
    .net 线程基础 ThreadPool 线程池
    .net 序列化反序列化
  • 原文地址:https://www.cnblogs.com/wujidns/p/4133589.html
Copyright © 2011-2022 走看看