精华内容
下载资源
问答
  • 代码实现 不用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>


    展开全文
  • 代码奉上: <template> <canvas id="canvas" /> </template> <script> export default { name: "BackCanvas", props: { height: { type: Number, default: 500

    先看一下效果:

    在这里插入图片描述

    代码奉上:

    <template>
        <canvas id="canvas" />
    </template>
    
    <script>
        export default {
            name: "BackCanvas",
            props: {
                height: {
                    type: Number,
                    default: 500
                }
            },
            data() {
                return {
                    settings: {
                        COL_WIDTH: 15,
                        COL_HEIGHT: 15,
                        // 速度参数 最小值:4 - 最大值:8
                        VELOCITY_PARAMS: {
                            min: 3,
                            max: 8
                        },
                        // 代码长度参数  最小值 20  - 最大值 40
                        CODE_LENGTH_PARAMS: {
                            min: 20,
                            max: 40
                        }
                    },
                    animation: null,
                    c: null,
                    ctx: null,
                    lineC: null,
                    ctx2: null,
                    WIDTH: window.innerWidth,
                    HEIGHT: window.innerHeight,
                    COLUMNS: null,
                    canvii: [],
                    // font from here https://www.dafont.com/matrix-code-nfi.font
                    font: '24px matrix-code',
                    letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'this', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],
                    codes: [],
                    createCodeLoop: null,
                    codesCounter: 0
                }
            },
            mounted() {
                this.init();
            },
            methods: {
                init () {
                    this.c = document.getElementById( 'canvas' );
                    this.ctx = this.c.getContext( '2d' );
                    this.c.width = this.WIDTH;
                    this.c.height = this.HEIGHT;
    
                    this.ctx.shadowBlur = 0;
                    this.ctx.fillStyle = '#000';
                    this.ctx.fillRect(0, 0, this.WIDTH, this.HEIGHT);
                    this.ctx.font = this.font;
    
                    this.COLUMNS = Math.ceil(this.WIDTH / this.settings.COL_WIDTH);
    
                    for (let i = 0; i < this.COLUMNS; i++) {
                        this.codes[i] = [];
                        this.codes[i][0] = {
                            'open': true,
                            'position': {'x': 0, 'y': 0},
                            'strength': 0
                        };
                    }
    
                    this.loop();
    
                    this.createLines();
    
                    this.createCode();
    
                    window.onresize = function () {
                        window.cancelAnimationFrame(this.animation);
                        this.animation = null;
                        this.ctx.clearRect(0, 0, this.WIDTH, this.HEIGHT);
                        this.codesCounter = 0;
    
                        this.ctx2.clearRect(0, 0, this.WIDTH, this.HEIGHT);
    
                        this.WIDTH = window.innerWidth;
                        this.HEIGHT = window.innerHeight;
                        this.init();
                    };
                },
                loop () {
                    this.animation = requestAnimationFrame( () => { this.loop(); } );
                    this.draw();
                },
                draw () {
                    let velocity, height, x, y, c, ctx;
                    // slow fade BG colour
                    this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
                    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                    this.ctx.fillRect(0, 0, this.WIDTH, this.HEIGHT);
                    this.ctx.globalCompositeOperation = 'source-over';
                    for (let i = 0; i < this.COLUMNS; i++) {
                        if (this.codes[i][0].canvas) {
                            velocity = this.codes[i][0].velocity;
                            height = this.codes[i][0].canvas.height;
                            x = this.codes[i][0].position.x;
                            y = this.codes[i][0].position.y - height;
                            c = this.codes[i][0].canvas;
                            ctx = c.getContext('2d');
    
                            this.ctx.drawImage(c, x, y, this.settings.COL_WIDTH, height);
    
                            if ((this.codes[i][0].position.y - height) < this.HEIGHT){
                                this.codes[i][0].position.y += velocity;
                            } else {
                                this.codes[i][0].position.y = 0;
                            }
                        }
                    }
                },
                createCode () {
                    if (this.codesCounter > this.COLUMNS) {
                        clearTimeout(this.createCodeLoop);
                        return;
                    }
                    let randomInterval = this.randomFromInterval(0, 100);
                    let column = this.assignColumn();
                    if (column) {
                        let codeLength = this.randomFromInterval(this.settings.CODE_LENGTH_PARAMS.min, this.settings.CODE_LENGTH_PARAMS.max);
                        let codeVelocity = (Math.random() * (this.settings.VELOCITY_PARAMS.max - this.settings.VELOCITY_PARAMS.min)) + this.settings.VELOCITY_PARAMS.min;
                        let lettersLength = this.letters.length;
    
                        this.codes[column][0].position = {'x': (column * this.settings.COL_WIDTH), 'y': 0};
                        this.codes[column][0].velocity = codeVelocity;
                        this.codes[column][0].strength = this.codes[column][0].velocity / this.settings.VELOCITY_PARAMS.max;
    
                        for (let i = 1; i <= codeLength; i++) {
                            let newLetter = this.randomFromInterval(0, (lettersLength - 1));
                            this.codes[column][i] = this.letters[newLetter];
                        }
    
                        this.createCanvii(column);
    
                        this.codesCounter++;
                    }
                    this.createCodeLoop = setTimeout(this.createCode, randomInterval);
    
                },
                createCanvii (i) {
                    let codeLen = this.codes[i].length - 1;
                    let canvHeight = codeLen * this.settings.COL_HEIGHT;
                    let velocity = this.codes[i][0].velocity;
                    let strength = this.codes[i][0].strength;
                    let text, fadeStrength;
    
                    let newCanv = document.createElement('canvas');
                    let newCtx = newCanv.getContext('2d');
    
                    newCanv.width = this.settings.COL_WIDTH;
                    newCanv.height = canvHeight;
    
                    for (let j = 1; j < codeLen; j++) {
                        text = this.codes[i][j];
                        newCtx.globalCompositeOperation = 'source-over';
                        newCtx.font = '24px matrix-code';
    
                        if (j < 5) {
                            newCtx.shadowColor = 'hsl(104, 79%, 74%)';
                            newCtx.shadowOffsetX = 0;
                            newCtx.shadowOffsetY = 0;
                            // 设置模糊程度
                            newCtx.shadowBlur = 6;
                            newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';
                        } else if (j > (codeLen - 4)) {
                            fadeStrength = j / codeLen;
                            fadeStrength = 1 - fadeStrength;
    
                            newCtx.shadowOffsetX = 0;
                            newCtx.shadowOffsetY = 0;
                            newCtx.shadowBlur = 0;
                            newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')';
                        } else {
                            newCtx.shadowOffsetX = 0;
                            newCtx.shadowOffsetY = 0;
                            newCtx.shadowBlur = 0;
                            newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')';
                        }
    
                        newCtx.fillText(text, 0, (canvHeight - (j * this.settings.COL_HEIGHT)));
                    }
    
                    this.codes[i][0].canvas = newCanv;
    
                },
                createLines () {
                    this.linesC = document.createElement('canvas');
                    this.linesC.width = this.WIDTH;
                    this.linesC.height = this.HEIGHT;
                    this.linesC.style.position = 'fixed';
                    this.linesC.style.top = 0;
                    this.linesC.style.left = 0;
                    this.linesC.style.zIndex = 10;
                    document.body.appendChild(this.linesC);
    
                    let linesYBlack = 0;
                    let linesYWhite = 0;
                    this.ctx2 = this.linesC.getContext('2d');
    
                    this.ctx2.beginPath();
    
                    this.ctx2.lineWidth = 1;
                    this.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)';
    
                    while (linesYBlack < this.HEIGHT) {
    
                        this.ctx2.moveTo(0, linesYBlack);
                        this.ctx2.lineTo(this.WIDTH, linesYBlack);
    
                        linesYBlack += 5;
                    }
    
                    this.ctx2.lineWidth = 0.15;
                    this.ctx2.strokeStyle = 'rgba(255, 255, 255, 0)';
    
                    while (linesYWhite < this.HEIGHT) {
    
                        this.ctx2.moveTo(0, linesYWhite+1);
                        this.ctx2.lineTo(this.WIDTH, linesYWhite+1);
    
                        linesYWhite += 5;
                    }
    
                    this.ctx2.stroke();
                },
                assignColumn () {
                    let randomColumn = this.randomFromInterval(0, (this.COLUMNS - 1));
    
                    if (this.codes[randomColumn][0].open) {
                        this.codes[randomColumn][0].open = false;
                    } else {
                        return false;
                    }
    
                    return randomColumn;
                },
                randomFromInterval (from, to) {
                    return Math.floor(Math.random() * (to - from+ 1 ) + from);
                }
    
            }
        }
    </script>
    
    <style scoped>
    /** 让这个背景固定在页面不随着滚动而滚动 */
     #canvas {
         position: fixed;
         top: 0;
         left: 0;
     }
    </style>
    

    有帮助的点个赞!感谢

    展开全文
  • php+js实现瀑布代码

    热门讨论 2013-01-08 10:22:20
    php+js实现瀑布代码 瀑布代码 php瀑布流要有PHP运行平台 下载过后自己研究 有的地方换成自己需要的就好了
  • 主要为大家详细介绍了JavaScript canvas仿代码瀑布,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 超酷jQuery瀑布代码

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

    2014-07-04 13:47:00
    代码瀑布流 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.11.1....
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var waterfull = {
            num:0,
            init: function() { 
                window.onscroll=this.throttle(this.isScroll,150);
                this.isScroll();//初始化
            },
            isScroll:function(){
                console.log("isScroll");
                var _height=parseInt($(window).height());
                var _srcoll=parseInt($(window).scrollTop());
                //var _sTop=_height+_srcoll;
                var _sTop=_height+_srcoll-100;//减一行的高度
    
                var $list=$("li");
                var e;
                var li_top = $list.last().offset().top;
                if(li_top<_sTop){//判断li的top小于(屏幕+滚动高)的高度,即加载
                    console.log("li_top"+li_top+"-------_sTop"+_sTop);
                    for(var j=0;j<10;j++){//胡乱添加点东西
                        $("#ul_shoplist").append("<li>"+waterfull.num+"</li>");
                        waterfull.num++;
                    }
                }
            },
            throttle: function(fn,delay){
                var timer = null;
                var _this=this;
                return function(){
                    var context = _this, args = arguments;
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        fn.apply(context,args)}, delay);
                };
            }
        }
        waterfull.init( );//瀑布流
    });
    </script>
    <style type="text/css">
    #main{margin:0 auto;width:1100px;}
    ul,li{list-style:none;margin:0;padding:0;}
    li{width:360px;height:100px;border:1px solid #000;}
    </style>
    </head>
    <body>
    
    <div id="main">
    <ul id="ul_shoplist">
    <li>1111111111</li>
    <li>222222222</li>
    </ul>
    </div>
    </body>
    </html>

     

     

    这是网上的一个瀑布流插件,效果更好:   2015-6-24

    http://www.jq22.com/jquery-info362

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    
    <!-- jquery库 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>
    
    </head>
    <body>
    <script type="text/javascript">
    $(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                    itemSelector: '.box',
                    gutter: 20,
                    isAnimated: true,
                });
         });
    });
    </script>
    <style type="text/css">
    .container-fluid {padding:20px;}
    .box {margin-bottom: 20px;float: left;width: 220px;}
    .box img {max-width: 100%;}
    </style>
    <div id="masonry" class="container-fluid">
      <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201503/2015-03-25_231542.png"></div>
      <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201503/2015-03-25_234342.png"></div>
      <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201503/doufunao-s.jpg"></div>
      <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201501/follow-me.jpg"></div>
      <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201504/earth-star.jpg"></div>
      <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201501/juhua.jpg"></div>
    </div>
    </body>
    </html>

     

     

    第三个瀑布流例子:(最新图片由上而下在左右两列依次排列。图片左右两列,判断图片是否已加载,未加载的隐藏)

    滚屏事件,由 logTime 时间值控制,超过500毫秒才能触发一次。

    两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    http://www.cnblogs.com/qq21270/p/4880955.html  代码已改好,推荐! 2015.10.14

     

     第四个:国外一个瀑布流插件 ,还没研究  

    http://masonry.desandro.com/   2015-10-12

    第五个:纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    http://www.cnblogs.com/sanshi/p/3237429.html   2015-10-12

    第六个:http://www.cnblogs.com/leolai/archive/2013/04/23/3038159.html   瀑布流插件(可用)  2014-8-12


     

    瀑布流 - 代码参考:

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503091492.html  Pinterest样式的瀑布流图片(可惜是先排左列再排右列的)

    http://www.zhangxinxu.com/study/201203/waterfall-layout.html    http://www.zhangxinxu.com/wordpress/?p=2308   瀑布流布局(基于多栏列表流体布局实现)

    http://www.lijian.net/p/windswaterflow/  一个瀑布流例子,参考

    http://www.cnblogs.com/2050/archive/2012/05/03/2480702.html   http://chaping.github.io/waterfall/  一个瀑布流例子,参考

    http://www.cnblogs.com/slowsoul/archive/2013/02/10/2909746.html  一个绝对定位的瀑布流例子

    http://tieba.baidu.com/p/3182692830?fr_bdps_bottom_login=1   一些瀑布流上存在的问题及解决方法(绝对定位瀑布流,图片高度获取问题,参考)  2015-10-10

     

     

     

    ............

     

     

     

     

     

     

     

     

     

    posted on 2014-07-04 13:47 bjhhh 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/qq21270/p/3824217.html

    展开全文
  • 5行代码实现瀑布

    2020-01-11 00:04:18
    5行代码实现瀑布流 今天做页面,完了给老板看,都不满意,他非要瀑布流。是的,就是这么任性,都是我们平时给惯出来的。算了,上网查了下瀑布流的逻辑和写法。说实话,没看懂,太复杂。自己搞了一个,没想到5行代码...

    5行代码实现瀑布流

    今天做页面,完了给老板看,都不满意,他非要瀑布流。是的,就是这么任性,都是我们平时给惯出来的。算了,上网查了下瀑布流的逻辑和写法。说实话,没看懂,太复杂。自己搞了一个,没想到5行代码搞定,贴出来给大家一起学习学习!(ps:css实现的那种是竖向排列的,你们可以了解下,瀑布流目前只能用js实现)

        let arr = [0,0,0,0];
        img.on("load",function(){
           $(“.img”).css({
               top:Math.min(...arr),
               left:arr.indexOf(Math.min(...arr)) * ($(".img").width() + 20)
           });
           arr[arr.indexOf(Math.min(...arr))] += $(this).height()+20;
        });
    

    DEMO[点击查看](右键查看源码复制)

    展开全文
  • 最少代码瀑布流实现预览效果是一款使用chrome或是全屏浏览的最佳页面效果。   最少代码瀑布流实现预览
  • 学习瀑布代码

    2014-04-03 23:42:28
    以下代码瀑布流没有关系,知识由于开始的时候看了
  • 先看效果图吧: JS代码先放上来给大家看下思路。具体实现还是需要css和html代码的,可以看我的在线源代码和效果: 全屏,chrome,浏览最佳 http://runjs.cn/detail/j9qlhajc ...// 瀑布流插件 // p...
  • 主要为大家详细介绍了JavaScript瀑布流布局的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 代码简介:jquery瀑布流排列样式代码是一款基于gridify.js插件实现的jquery瀑布代码
  • King's Girls 采用 RXJava Retrofit OKHttp Material Design Base Glide构建,是一款以瀑布流的形式展示美女福利的App。 Gif展示 下载 扫描二维码下载 下载地址:https://fir.im/KingsGirls 鸣谢 干货集中营 提供...
  • Pinterest网格瀑布流布局代码基于Bootstrap3.3.7制作,Bootstrap响应式图片瀑布代码
  • 瀑布流布局代码一例

    2020-12-09 00:30:44
    代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...瀑布流布局代码</title> <script type=”text/javascrip
  • 主要为大家分享了原生js实现移动端瀑布流式代码示例,对瀑布流布局感兴趣的小伙伴们可以参考一下
  • 三行代码实现瀑布流 在前端中实现瀑布流的方法有很多,比如利用JS、jQuery、和CSS3。在这三种方法中,要数JS最为麻烦,而以CSS3最为简单。下面一一进行分析。 这三种方法中,所有的样式基本是相同的,所以先将它列...
  • 代码简介:jQuery手机端投票瀑布代码是一款清爽好看的手机投票瀑布流样式代码
  • 瀑布流布局代码

    2014-04-10 17:08:36
    瀑布流布局代码 body, div, img, h1, h2, h3, h4, h5, h6 { padding:0px; margin:0px; } img { border:none; } .wrapper { width:960px; margin:0 auto; } #con1_1 { position:relative; } #con1_1 ....
  • 代码简介:jQuery底部自动填充瀑布代码是一款比较简洁的jQuery瀑布代码,不到100行代码却能兼容所有主流浏览器。
  • 这是一款仿百度图片瀑布流网格布局效果的jQuery响应式自适应图片瀑布代码,可自适应浏览器宽度。
  • jq瀑布代码

    2020-06-21 10:06:51
    <style> #zh{ position:fixed; width:100%; height:100%; background:url(images/bgblack.png); top:0; left:0; z-index:99999; text-align:center;} #zh img{ margin-top:20%;} .list_bg{padding-top: 20px;....
  • js瀑布代码

    2020-05-15 09:52:24
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>waterfall</title> </head> <style type="text/css"> body{ background-color: #... margi...
  • 代码简介:仿Pinterest网格瀑布代码,支持响应式布局,使用简单,非常实用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,302
精华内容 920
关键字:

代码瀑布