一个简单的瀑布流实现

##瀑布流简介
主要是运用Html+CSS+JavaScript(DOM对象和window对象)来实现一个瀑布流,最终效果是在页面中滚动鼠标不断地加载图片永远划不到头,像百度图片这样的,在没有设置分页的的情况下,当滚动滚动条的时候页面从数据库源源不断的加载图片呈现在页面中。如下图所示:

阅读全文

js-javascript单体模式

##什么是单体
单体是一个用来划分命名空间并将一批相关的方法和属性组织在一起的对象,如果可以被实例化,那么它只能被实例化一次.

##与字面常量的区别
创建方法一样,但是用途不同.字面量用来创建对象,可以用来被继承等等 , 单体用来划分命名空间.

##有什么优势和可用来干什么?
它们可以用来减少网页中的全局变量的数目.它们还可以一种名为分支(branching)的技术中用来封装浏览器之间的差异.更重要的是,借助于单体模式,可以把代码组织得更为一致,从而使其更容易阅读和维护.

阅读全文

react入门

create-React-app是一个全局的命令行工具用来创建一个新的项目
react-scripts是一个生成的项目所需要的开发依赖

一般我们开始创建反应网应用程序的时候,要自己通过npm或者纱安装项目的全部依赖,再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码
现在如果你正在搭建反应运行环境,使用create-react-app去自动构建你的程序。你的项目所在的文件夹下是没有配置文件.react-scripts是唯一的额外的构造依赖在你的package.json中,你的运行环境将有每一个你需要用来构建一个现代应用程序应用程序你需要依赖,在配置文件中编写的配置代码,反应脚本都帮你写了,比如:react-scripts帮你自动下载需要的webpack-dev-server依赖,然后反应脚本自己写了一个nodejs服务端的脚本代码start.js来实例化WebpackDevServer,并且运行启动了一个使用express的Http服务器,现在你只需要专心写SRC源代码就可以了。省去了很多精力,最适合快速上手一个演示了。

阅读全文

移动端布局

移动端布局
自适应
流体式
相对单位
弹性
盒子
盒子模型
计算器
固定宽
响应式

meta
    name
        viewport

阅读全文

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

阅读全文

详细版用Supervisor守护你的Node.js进程

##0.Node.js开发的特点

在初上手Node.js开发的时候,我们要启动一个服务,使用的是 node 命令:
node myapp
然而,node告诉我们,服务端的js代码只有在node第一次引用,才会重新加载;如果node已经加载了某个文件,即使我们对它进行了修改, node也不会重新加载这个文件。
那么,在开发过程中,要如何才能像PHP一样,修改某个文件后,直接刷新网页就能看到效果呢?
方法有很多,比如使用 pm2、forever 等来管理,比如使用今天要介绍的 supervisor。

阅读全文

Javascript的继承与多态

  • 本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论。最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了“运算符重载”的思路。本文假设你已经知道或了解了js中原型、原型链的概念。

阅读全文

流媒体协议介绍(rtp/rtcp/rtsp/rtmp/mms/hls)

RTP

    参考文档 RFC3550/RFC3551
   Real-time Transport Protocol)是用于Internet上针对多媒体数据流的一种传输层协议。RTP协议详细说明了在互联网上传递音频和视频的标准数据包格式。RTP协议常用于流媒体系统(配合RTCP协议),视频会议和一键通(Push to Talk)系统(配合H.323或SIP),使它成为IP电话产业的技术基础。RTP协议和RTP控制协议RTCP一起使用,而且它是建立在UDP协议上的。 

阅读全文

深入理解CSS过渡transition

前面的话

  通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识

定义

  过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

阅读全文

js继承的几种实现方式

JavaScript 实现继承的几种方式,有通过原型继承的, 有通过复制父类值继承的。

####有动物类【父类】和猫类【子类】

function Animal(){
  this.species = “动物”;
}

function Cat(name,color){
  this.name = name;
  this.color = color;
}

阅读全文