三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

  瀑布流布局及扩展——格子块的智能堆砌 作者:Neoxone    发表时间: 2011年10月12号,星期三     阅读:27,694 次  

图片分享网站Pinterest(beta),在不久前获得了2700$的投资,估值已超2亿元(据说现该公司团队有8人)。该网站的一大特色就是每一张分享的图片被拟作“Pin”被钉在页面上面,每一Pin依尺寸智能排列,同时滚动页面时异步加载新Pin,极具效果。这种创新模式被在国内也被广泛copy,其中最有前途的当属Mark之,以”Mark”代”Pin”,也算有些想法。

以下是利用豆瓣API数据做的效果:完整效果
部分代码:

这种布局中虽然每个Pin的高度不尽相同,但是他们的宽度都是一样的。
那么假如,很邪恶的提出一个要求,宽度也不尽相同,只是说宽高都按比例成倍增加,那还怎么排列呢?
呵呵,如下:

现在这种布局已经不能叫瀑布流了,我们称之为格子块,格子块通过算法智能堆砌。

到最后,说点下睛也好,说添下足也好,我们再加一个拖动交换格子的效果。

   

  Typing… 作者:Neoxone    发表时间: 2011年07月28号,星期四     阅读:7,616 次  

最近一个多月都比较忙,没什么时间精力更新blog,现在终于闲下来了。
之前有个朋友发给我一个打字机的效果,蛮有感觉的,不过那是用VBscript写的…
而下面的这个demo里除了打字的效果,还结合了以前这个:我是谁里的效果。
至于里面的心形图案,是我一个一个取出坐标得到的,如果你对心形图案还有兴趣,还可以看看这篇文章笛卡尔情书的秘密

   

  烟花易冷,青春难留 作者:Neoxone    发表时间: 2011年06月26号,星期天     阅读:5,507 次  

繁华声,遁入空门,折煞了世人
梦偏冷,辗转一生,情债又几本
如你默认,生死枯等
枯等一圈,又一圈的年轮
浮屠塔,断了几层,断了谁的魂
痛直奔,一盏残灯,倾塌的山门
容我再等,历史转身
等酒香醇,等你弹一曲古筝

用周杰伦的一首《烟花易冷》,纪念我即刻逝去的青春。

   

  Google电吉他扩展版——可智能识别曲谱 作者:Neoxone    发表时间: 2011年06月19号,星期天     阅读:19,816 次  

姗姗来迟,还请见谅。
在6月9号Google 放出的纪念电吉他之父莱斯·保罗 96 周年诞辰的电吉他Doodle代码上,扩展了这个可播放曲谱的版本。
做这个扩展版的初衷是为了方便不是很熟悉键盘的童鞋。
童鞋们可以从网上复制曲谱进来自动播放(如果读者能自己谱曲,那真的就太棒了)。
曲谱中的空格及所有非法字符都表示停顿,间隔越大表示停顿越长,也可以调整曲子的整体节奏快慢。
同时可以开启自带的录音功能,录制之后会生产网址,可以拿来同朋友分享(由于国内网络环境的问题,网址生产可能会有限滞后)。
代码方面删除了不相干的部分,并做了格式整理,但由于原代码是经过压缩的,所以阅读起来还是会很费力的,很多地方处理的挺复杂,能力有限也不便做代码分析。
以下就是全部的代码(24k的code,1张图片,1个声音的flash文件):

可以运行以上代码,也可以访问这个链接:http://www.cssass.com/blog/resource/guitar/

最后罗列一些网上流传的曲谱:
欢乐颂:

uuiooiuyttyuuyy uuiooiuyttyuytt yyutyuiutyuiuytyw uuiooiuyttyuytt

爱情买卖:

3688368 77653 2226235 37753 3688368 00989 00989987 53566

茉莉花:

eetyiiyttyt eetyiiyttyt tttetyyt ewetewqqwq ewqwetyit ewetewqqwq

义勇军进行曲:

qr rrrqwer r yrtyi i yyryiytt o i t y iy iytyr y qwrryyiittw t qr ry yi rtiio i yriiiy r q r yriiiy r q r q r q r r

沧海一声笑:

pouyt uytew wewetyuopppou

童年:

35553 6676 66588886865 355536676 66658888668 9~

上海滩:

356666,352222,356865132

一闪一闪亮晶晶

1155665 4433221 5544332 5544332 1155665 4433221;

天空之城

6787807 365685 254573 874477 6787807 365685 34878908 876756 1232352
5878007 678789855 43213 376321 21253 376321 21276

春江花月夜

H-HHK-LHG~G-G-H-KLD~D-SDG-DGH~KL-;-K-L;LKH-G~

隐形的翅膀

358787 6568321 11186532122 358787 6568321 1118653211

可以复制曲谱到文本框中直接播放。欢迎读者提供更精彩的乐谱。

   

  如何获取窗口高度、页面高度——解读各浏览器盒模型下的窗口、页面文档尺寸 作者:Neoxone    发表时间: 2011年06月8号,星期三     阅读:10,223 次  

获取页面高度或窗口高度,是使用绝对层定位(弹出菜单定位,遮罩层尺寸设置)所经常用到的。
但是各个浏览器在这方面的效果却有着非常大的差异,本文将做一些总结,找出一些全兼容的方法来获取页面的高度,窗口的高度,页面文档的高度,滚动条滚过的距离,以方便今后使用。

开始之前,先提一些常识性的东西:
documentElement的对象元素就是html节点。
offsetHeight包括了clientHeight和border。
scrollHeight包括了滚动内的高度。
页面文档的高度指的是页面内实际内容的高度。

下面的demo中,我们将页面的内容设置为2000*1000px的尺寸。
此处没有对html,body做过width,height设置,否则将有所不同。