精华内容
下载资源
问答
  • 代码瀑布

    2014-11-05 21:36:27
    c小程序,实现的是黑客帝国里的代码瀑布流效果,全屏运行
  • Js代码 瀑布

    2015-03-12 08:54:18
    瀑布代码行,以文件描述为主的代码,通过jQuery 10点2版本开发
  • 代码实现 不用xib 不懂可以留言
  • 这篇博文仅记录用,无任何技术知识阐述。 分析 1.技术分析: canvas绘制文字的函数 fillText("...瀑布需求: (1)形象(即拥有瀑布的属性,由上至下,无间断,错落有致) (2)美观 设计 将瀑布分为...

        这篇博文仅记录用,无任何技术知识阐述。

        分析

            1.技术分析:
                canvas绘制文字的函数 fillText("text",x,y) 可以在某个坐标绘制出文字。
            2.瀑布需求:
                (1)形象(即拥有瀑布的属性,由上至下,无间断,错落有致)
                (2)美观
       
        设计

            将瀑布分为多条小瀑布;每条小瀑布包含多个水滴(内容);每条小瀑布下落速度不同;水滴(内容)的速度、大小相同,小瀑布下密上疏。
        
        实现

            对象:
                瀑布属性值:密度(小瀑布数量)
                小瀑布属性值:长度(小瀑布内容数量),下落速度,大小(小瀑布内容大小)
            方法:
                初始化,定时循环
       

        因当时是先写的代码,分析做的不到位,所以这份代码写出来可读性太低
    <html>
    <body>
    	<canvas id="myCanvas" style="position:absolute;top:0;left:0;background-color:#000;"></canvas>
    </body>
    
    <script type="text/javascript">
    	
    	//瀑布流
    	var fallArr = new Array();
    	//瀑布流颜色
    	var fallColor = function(a){return "rgba(255,255,150,"+a+")"};
    	//瀑布流字体
    	var fallFont = " console";
    	var fallFontSize = 19;
            //瀑布下落速度
    	var speed = 10;
    	//瀑布长度(瀑布内容数量)
    	var cd = 30;
    	//瀑布密度(横向)
    	var density = 150;
    	//画布大小
    	var canvas_w = document.documentElement.clientWidth || window.innerWidth || screen.availWidth || screen.width;
    	var canvas_h = document.documentElement.clientHeight || window.innerHeight || screen.availHeight || screen.height;
    	
    
    	var canvas = null;
    	var c = null;
    	var x;
    	
    	//全局初始化
    	function init(){
    
    		//瀑布流初始化
    		for(var i=0;i<density;i++){
    			fallArr[i] = {speed:speed*Math.random(),strArr:[],y:0};
    			//瀑布流内容初始化
    			for(var j=0;j<cd;j++){
    				fallArr[i].strArr[j] = Math.random()>0.5?0:1;
    			}
    		}
    		//画布初始化
    		canvas = document.getElementById("myCanvas");
    		canvas.width = canvas_w;
    		canvas.height = canvas_h;
    		
    		//画笔初始化
    		c = canvas.getContext("2d");
    	}
    	
    	//画瀑布
    	function draw(c){
    	
    		for(var j=0;j<fallArr.length;j++){
    			//瀑布横向位置(平均分布)
    			x = canvas_w/density*j;
    			//各条瀑布流的纵向位置
    			fallArr[j].y++;
    			for(var i=0;i<fallArr[j].strArr.length;i++){
    				//瀑布内容渐变
    				c.fillStyle= i<3&&Math.random()>0.8? "rgba(255,255,0,"+(1-1/fallArr[j].strArr.length*i)+")" : fallColor(1-1/fallArr[j].strArr.length*i);
    				//重新计算瀑布下落速度(个别瀑布流下落过慢)
    				fallArr[j].speed = fallArr[j].speed < 2 ? Math.random()*speed : fallArr[j].speed;
    				c.fillText(fallArr[j].strArr[i],x,fallArr[j].speed*fallArr[j].y-i*fallFontSize);
    			}
    			//瀑布流下落到底重新下落
    			if(fallArr[j].speed*fallArr[j].y-i*fallFontSize>canvas_h){
    				fallArr[j].y=0;
    			}
    		}
    				
    	}
    	
    	window.onload = function(){
    		init();
    		
    		//瀑布循环下落
    		var timer = window.setInterval(function(){
    			
    			canvas.height=canvas_h;
    			c.lineWidth=1;
    			c.font=fallFontSize+"px"+fallFont ;
    			draw(c);
    		},5)
    	}
    
        	
    </script>
    </html>


    展开全文
  • 最新瀑布流源代码

    2015-10-10 23:03:00
    最新瀑布流源代码 瀑布流网页拖到最后自动下加载新的内容
  • 瀑布js代码

    2014-08-15 16:56:38
    瀑布js代码
  • php+js实现瀑布代码

    热门讨论 2013-01-08 10:22:20
    php+js实现瀑布代码 瀑布代码 php瀑布流要有PHP运行平台 下载过后自己研究 有的地方换成自己需要的就好了
  • 瀑布代码

    2014-05-12 19:22:43
    瀑布代码
  • 主要为大家详细介绍了JavaScript canvas仿代码瀑布,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 摘要:脚本资源,jQuery,瀑布流 JQuery wookmark 瀑布代码实例,现在很流行的一种网页布局效果,瀑布流,随意、洒脱,个性十足,一种代表时尚潮流的网页设计风格,如果你想在网页上使用瀑布流,这个源码可以让你...
  • jquery特效 最少代码瀑布流实现,完美!
  • 最少代码瀑布流实现预览效果
  • 无限加载jQuery瀑布代码
  • jquery masonry瀑布流插件制作图片瀑布流布局代码
  • 瀑布代码模拟网络图片
  • canvas 瀑布动画是一款有点瀑布效果动画特效
  • AutoLayout瀑布布局代码

    热门讨论 2014-08-20 23:00:59
    仿瀑布型的自定义视图
  • 瀑布流源代码

    2015-12-31 16:05:21
    瀑布流 无限加载 以及masonry的简单使用
  • 代码简介:jquery瀑布流排列样式代码是一款基于gridify.js插件实现的jquery瀑布代码
  • 仿Pinterest网格瀑布代码,支持响应式布局,使用简单,非常实用。
  • 超酷jQuery瀑布代码

    2019-12-12 02:56:21
    这是一款jQuery瀑布流插件,整个瀑布代码写的十分简洁,但效果却十分出色。
  • 瀑布流的代码

    2014-09-10 10:43:09
    主要是运用了scrollview和tableview,实现瀑布流的代码编写
  • android 瀑布代码

    2013-03-29 15:52:51
    模仿蘑菇街、美丽说的瀑布流加载图片.滚动加载,瀑布流,图片处理。
  • 瀑布流 android 源代码

    2012-06-07 15:00:25
    android eclipse 开发的源代码,有关于图片以瀑布流载入的方法!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,462
精华内容 14,584
关键字:

代码瀑布