未来不迎,当下不杂,既往不恋,读《当下的力量》

多年前,我就一直有这种困惑,明明在做着一件事,但总是会去想一些跟事情本身毫不相干的其他事。大多数情况下都是无意识的,这种漫无目的思考还停止不了,吃饭、走路、打扫房间,甚至是睡觉,只要是和工作无关( 因为工作时要保持注意力的高度集中 )就会出现这种“思考强迫症”。当时认为,这对于一个正常人来说是很正常的事,可能正是因为有了思考才证明“我”存在于这个世界上,笛卡尔不是说,我思故我在吗?虽然是有些困惑,但是还没有怀疑过。

据说人的一天平均会产生6万个念头,有些念头是稍纵即逝的,有些念头会让你去忍不住思考,这些念头在耗费着脑力,让人觉得很累。就像一台电脑,在系统初装的那一刻,运转速度挺快的,随着应用程序越装越多,垃圾越来越多,电脑的运转速度就慢了下来。

阅读全文 »

非等宽图片列表的布局

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量、尺寸都是参差不齐的,并限定了每一行的总宽度。这种非等宽的图片列表,在Google+、flickr也都有用到。

searchlist_demo

最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路。

非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好)。

先理下基本的需求:

  • 1、图片的宽度是不固定的;
  • 2、图片的高度是固定的;
  • 3、每行图片的总宽度是固定的,所以每行能容纳的图片的数量是无法确定的;
  • 4、确保图片质量不变,不能有拉伸变形导致图片失真的情况出现;
  • 5、图片之间的间距是固定的;
阅读全文 »

浅谈DOM事件的优化

在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove、resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll)。

浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大。很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法。

mousemove 在拖拽中的优化

拖拽( Drag )是很常见的一个功能,在浏览器还没实现原生的拖拽之前,通过 mousedown、mousemove、mouseup 3种事件类型就可以模拟出拖拽效果来,当然这里不谈如何去实现一个拖拽功能。

mousemove 事件在拖拽的应用中既要确保拖拽的流畅度,又要确保拖拽时的性能,如何保持两者的平衡呢?

阅读全文 »

easy.js发布核心库的稳定版以及组件库

0

easy.js 核心库升级至 1.0.0,同时发布了组件库。

easyjs.org

easy.js的网站:http://easyjs.org

github地址:https://github.com/chenmnkken/easyjs

阅读全文 »

一淘九宫格的面试题

来自一淘的 WEB 前端的面试题,题目要求如下:

使用 HTML+CSS 实现如图布局,border-width:5px,格子大小是 50px*50px,hover时边框变成红色,需要考虑 IE6+ 和语义化的结构。

题目不难,主要还是考察面试者对 CSS 灵活运用程度。

一淘九宫格的面试题

以下 DEMO 是来自 JavaScript 罗浮宫3群好几个群员的 DEMO。

查看演示

如果你也有兴趣,不妨试试。

阅读全文 »