去年很早就看到过Pinterest这种布局。有人称之为瀑布流布局，有人称之为格子堆砌布局等。刚开始看到这样的页面，就被他那漂亮的图片和网站风格所吸引，有非常强的视觉冲击。如今这种布局已有很多网站效仿，多用于新闻，设计，产品，图片展示等。可见这种布局是非常受欢迎的。
今年元月十号，豆瓣猜新版首页上线。豆瓣猜是通过算法自动推荐给你的个性化内容。新版的布局很有创意，虽然没上述的布局那么强的视觉冲击，但每天通过3种类型的格子进行排列，图文并茂，简洁而大方。这是豆瓣的风格。
一直觉得瀑布流这种布局实现起来很简单，没亲自动手写过，今天趁此机会简单实现一下。我的思路跟Pinterest不同，我是先分好六列，然后在插入元素的时候比较每列的高度，新创建的元素插入到最矮的那一列中，完整代码：
提示：你可以先修改部分代码再运行。
在写代码过程中，刚开始获取高度我用的是计算样式，后来想想offsetHeight也行。觉得offsetHeight应该性能上快一点吧，便去jsPerf上做了个比较，结果后者比前者快了250倍左右(火狐9.0)，http://jsperf.com/getheight
网络中的相册应用经常会遇到这种情况：用户上传的图片经过服务器等比缩小后，前端把图片放在固定大小的格子里显示。由于用户上传的图片宽高比例不受限制，那么前端的显示处理不是裁剪就是留白。
不知何时，我看到QQ个人中心的图片展示添加了一种效果，鼠标移动，有超出格子范围的图片也跟着动。这样有个好处就是可以让用户看得到整张图片的信息。
我也来模拟一下这个效果，首先理一下思路：用户上传图片后服务端先是判断图片大小，若图片没有超出格子大小，不作处理；超过固定的格子大小的，再判断图片的横竖，若是横向图片，将图片等比缩小至高度跟格子高度一致，若是竖向图片(这里正方形也归为竖向图片)，将图片等比缩小至宽度跟格子宽度一致。缩小后的图片放入格子中一个方向显示完整另一个方向的多余部分则被隐藏。
QQ中的移动效果是靠改变margin值来实现的，当然也可以通过定位来实现。这里我模仿QQ的，代码贴出来，欢迎指正。
提示：你可以先修改部分代码再运行。
昨天无聊的时候翻了下以前保存的东西，看到了谷歌的眼睛追踪效果DEMO，感觉自己也可以写写，就写出来了，最终效果上稍微有些差别。
先看一下谷歌的例子：眼睛追踪效果
这里的主要难点的获取圆的坐标值，如果有公式的话，就能用代码写了。于是我翻阅了以前同事发我的PPT“极坐标系”，有兴趣可以下载看看。
这里圆(眼珠运动的轨迹)的坐标就可以用x = r * cosθ，y = r * sinθ来表示。
Math.atan2()函数返回点(x,y)和原点(0,0)之间直线的倾斜角。那么如何计算倾斜角θ呢？只需要将两点x，y坐标分别相减得到一个新的点(x2-x1,y2-y1)，然后利用他求出角度就可以了，使用下面的一个转换可以实现计算出两点间连线的夹角。
Math.atan2(y2-y1,x2-x1)
下面我们完整的代码贴出来：
提示：你可以先修改部分代码再运行。
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
arrayObject.concat(arrayX,arrayX,……,arrayX)
arrayX：该参数可以是具体的值，也可以是数组对象。可以是任意多个。
例：
var colors=["red","green","blue"];
var colors2=colors.concat("yellow",["black","brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join([separator])
separator：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
例：
var colors=["red","green","blue"];
alert(colors.join("."); //red.green.blue
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,[end])
slice()方法不会影响原始数组。
例：
var colors=["red","green","blue","yellow","purple"]; var colors2=colors.slice(1); var colors3=colors.slice(1,4); alert(colors2); //green,blue,yellow,purple alert(colors3); //green,blue,yellow
splice() 方法用于插入、删除或替换数组的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
arrayObject.splice(index,howmany,[element1,.....,elementX])
index：规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany：规定应该删除多少元素。必须是数字，但可以是 “0″。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
例：
var colors=["red","green","blue"]; var removed=colors.splice(0,1); //删除 alert(colors); //green,blue alert(removed); //red removed=colors.splice(1,0,"yellow","orange"); //插入 alert(colors); //green,yellow,orange,blue alert(removed); //返回一个空数组 removed=colors.splice(1,1,"red","purple"); //替换 alert(colors); //green,red,purple,orange,blue alert(removed); //yellow
栈是一种LIFO(last-in-first-out,后进先出)的数据结构。
push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度；
pop()方法则是从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。
例：
var colors=new Array();
var count=colors.push("red","green");
alert(count); //2
count=colors.push("black");
alert(count); //3
var item=colors.pop();
alert(item); //"black"
alert(colors.length); //2
队列数据结构的访问规则是FIFO(first-in-first-out,先进先出)。
shift()能够移除数组中的第一个项并返回该项，同时将数组长度减1；
unshift()能在数组前端添加任意个项并返回新数组的长度。
例：
var colors=new Array();
var count=colors.push("red","green");
alert(count); //2
count=colors.push("black");
alert(count); //3
var item=colors.shift();
alert(item); //"red"
alert(colors.length); //2
var colors=new Array();
var count=colors.unshift("red","green");
alert(count); //2
count=count.unshift("black");
alert(count); //3
var item=colors.pop();
alert(item); //"green"
alert(colors.length); //2
reverse()方法用于颠倒数组中元素的顺序。
注：该方法会改变原来的数组，而不会创建新的数组。
例：
var colors=["red","green","blue"]; var colors2=colors.reverse(); alert(colors); //blue,green,red alert(colors2); //blue,green,red
sort()方法用于对数组的元素进行排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。
arrayObject.sort([sortby])
注：数组在原数组上进行排序，不生成副本。
sortby ：规定排序顺序。必须是函数。
例：
var value=[0,1,5,10,15];
value.sort();
alert(value); //0,1,10,15,5 进行字符串比较时，"10"则位于"5"的前面
function compare(value1,value2){
return a-b;
}
value.sort(compare);
alert(value); //0,1,5,10,15
字符串的分割方法在js中经常会用到，每次用的时候我都会去搜索一遍，很麻烦，今天特地整理了一下，方便今后查阅。
stringObject.slice(start,[end])
返回一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
start如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
stringObject.substring(start,[stop])
返回一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
注：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。
substring()的第二个参数是负数的话，例子中会把第二个参数转换为0，变为substring(3,0)，这个方法会将较小的数作为开始位置，较大的数作为结束位置，相当于substring(0,3)。
stringObject.substr(start,[length])
返回一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 lenght 个字符。如果没有指定 lenght，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。
注：IE负值会返回原始字符串
substr()的第二个参数是负数的话，也会把第二个参数转换为0，变为substr(3,0)。
slice(),substring(),substr()不会修改字符串本身的值
例：
var stringValue="hello world"; alert(stringValue.slice(3)); //"lo world" alert(stringValue.substring(3)); //"lo world" alert(stringValue.substr(3)); //"lo world" alert(stringValue.slice(3,7)); //"lo w" alert(stringValue.substring(3,7)); //"lo w" alert(stringValue.substr(3,7)); //"lo worl" alert(stringValue.slice(-3)); //"rld" alert(stringValue.substring(-3)); //"hello world" alert(stringValue.substr(-3)); //"rld" alert(stringValue.slice(3,-4)); //"lo w" alert(stringValue.substring(3,-4)); //"hel" alert(stringValue.substr(3,-4)); //""
stringObject.split(separator,[howmany])
separator：字符串或正则表达式，从该参数指定的地方分割 stringObject。
返回一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。
例：
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]
"hello".split("", 3) //可返回 ["h", "e", "l"]
之前对HTML5 Canvas API进行了一个简单的介绍，今天我写了一个简单的画板,可以选择画笔颜色噢，话不多说，赶紧动手画画吧！
提示：你可以先修改部分代码再运行。
有关CanvasRenderingContext2D 对象的属性可以参考w3school。
昨天在微博上看到一个js的题目：
var b=new Boolean(false); alert(b == !b);
我们来分析一下：
b是一个引用对象，并不是false这个直接量。
!操作符可以应用于ECMAScript中的任何值，无论这个值是什么数据类型，这个操作符都会返回一个布尔值。这道题中的操作数是一个对象，返回false。
==操作符，会做自动转换后判断。而===只在两个操作数未经转换就相等的情况下返回true。
var b=new Boolean(false); alert(b); //false alert(typeof b); //object alert(!b); //false alert(typeof !b); //boolean alert(b == !b); //true alert(b === !b); //false
你可能学过<video>和<canvas>这两个标签，那有没有想过这两个标签结合起来使用呢。其实，两个标签结合使用可以发生有趣的事情。下面来看一个简单的实例。
<video width=480 height=360 id=v controls loop> <!--chrome--> <source src=video/video.mp4 type=video/mp4> <!--ff3.6以上,chrome,opera--> <source src=video/video.ogg type=video/ogg> <!--ff4.0以上，chrome,opera--> <source src=video/video.webm type=video/webm> </video>
我们给<video>标签设置了两个属性controls和loop。controls是向用户显示控件，比如播放按钮，loop是循环播放。在<video>标签中包含3个子元素<source>，每一个引用一段不同编码格式的视频，来兼容不同的浏览器。
不知道大家有没有用过在windows桌面播放视频，有些播放器可以支持这个功能。接下来我们就用<video>和<canvas>模拟这个有趣的功能。
html和css代码：
body{background:black;}
#c{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;
height:100%;}
#v{position:absolute;top:50%;left:50%;margin:-180px 0 0 -240px;}
<canvas id=c></canvas> <video id=v controls loop> <source src=video.ogg type=video/ogg> <source src=video.webm type=video/webm> <source src=video.mp4 type=video/mp4> </video>
我们让视频在浏览器中居中，并让canvas布满浏览器，把canvas元素放在前面是让他在视频的底下，来达到背景播放的效果。
js代码：
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 10);
var ch = Math.floor(canvas.clientHeight / 10);
canvas.width = cw;
canvas.height = ch;
v.addEventListener('play', function(){
draw(this,context,cw,ch);
},false);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
这段js代码很简单，添加一个播放事件，在canvas上画出播放时的放大画面,效果如下：
阅读这篇文章剩余部分 »
前几天在项目里状态选择这个功能上遇到点麻烦。先描述一下问题：当用户点击状态后显示下拉菜单，若用户没有做出选择就移出菜单，则让菜单隐藏起来。这个很容易想到用onmouseout来解决，但事情没有这么简单，来看一下实例：
提示：你可以先修改部分代码再运行。
我们发现从一个子元素移到另一个子元素的时候就会触发onmouseout事件，并没有等鼠标离开整个菜单后隐藏。
为了看清楚问题，下面的代码用来显示获取触发onMouseOut事件的元素。
提示：你可以先修改部分代码再运行。
