快乐忆站

瀑布流模板的一点感受

小松 — Sun, 06 May 2012 02:30:00 +0000

也用了这么久的瀑布流了（2月17日左右上线的），经过不断的完善和改良，现在基本大问题没什么了，小功能有些还在脑海中，有些实践了，但是没成功。本想像微博那样滚动到底部自动加载的，之前用infinitescroll实现过，可是我想要一些自定义的东西却是这个插件无法实现的，自己折腾了大半天无果就先放这了。下面说说我对自己的这个主题的一点感受吧。

本主题模仿的是http://pinterest.com/的瀑布流风格，当然，也遭到了老王同志的模仿，三个图如下：

老王

我的

个人觉得老王模仿的很成功！加入了很多个性的东西，说实话，我觉得比我的要好看~

但是瀑布流终究还是适合做图片站，特别是美女之类的，一展示出来效果肯定惊艳，像我这样的博客站的话信息太多，图片又不养眼，所以给人看上去很花的感觉，lulu已经不止一次说我博客好花了...我觉得首页在一般屏幕上显示3排会比较好，看上去不这么累，而且每一块不能太长，要不然总是拉滚动条也不好，首页图片加上lazyload的效果，这样能提高加载速度，在瀑布流里面，加载速度很重要。还有，图片最好指定宽高，并且用缩略图，不要用大图去压缩，这样非常是耗性能的，特别是firefox下，很容易卡。

目前瀑布流得脚本貌似有3种：1.jQuery，2.kissy，3.原生js。kissy总体觉得体积太大，但他的实现方式是结合js模板来实现的，性能会好一些，但是易用性就差一些了，原生的js的话易用性也会差一些，何况很多博客现在都在用jQuery，所以一般用户还是选择jQuery插件较多。我博客用的jQuery的masonry插件，更多该插件的信息请访问官方网站，当然还有很多类似功能的强大的jQuery插件，我这不一一列举了。

个人总结觉得：

瀑布流适合什么站？

1.图片展示站（美女，产品，美食之类的最佳）；
2.时尚站点；
3.装13站点（本站，哈哈~）。

瀑布流该注意些什么？

1.站点内瀑布流得图片最好使用缩略图，且显式指定宽高（kissy貌似内部会处理宽高，还有一些jQuery的插件也会处理，但是显式指定依旧是最保险的，这样你就不用等待图片加载就可以去进行瀑布流布局了，加快呈现的速度）；
2.首屏以外的图片最好采用延迟加载，加速页面呈现（结合第一点做比较好）；
3.页面的内一个单元块的信息量不要太多，一些无用信息尽量精简掉，这样用户看起来会清爽很多。

上面纯属个人吐槽的一些建议，有什么觉得不对的或者要补充的可以留言，我会随时更改。

OK，接下来我呀要对自己站点进行一系列的优化了，let's 瀑布流吧~

我捕捉到的春天

小松 — Wed, 25 Apr 2012 13:40:00 +0000

好久不更新，最近发生了很多变动，公司又搬家，工作忙得不可开交，当然，忙得感觉很不错~上周同学来杭州找工作，一起去K歌了一把，上上周部门活动，真人CS，拿着狙击枪的感觉真不错！第一次把我拍的照片秀出来，还真有点不好意思，大家权当娱乐，不要太过于计较细节哈（图片是经过压缩的，原图太大，不方便上插），图片的主角是两颗爱情魔法豆。

最后我们把两棵种在了一起，然后边上还种了大蒜，算是他们的伙伴吧~哈哈~期待开花的那一刻~不过估计还得换到更大的地方才有可能看到开花结果。

emlog读者墙插件重装上阵

小松 — Tue, 10 Apr 2012 04:30:00 +0000

前前一篇文章提到要解决读者墙的一个致命问题，想了好多办法，结合博友的提醒和小子的帮助，终于完美解决了！现在发布全新的插件，不会修改模板文件了，而是通过emlog正常的插件挂载点来实现，经测试效果挺好，极力推荐各位插件的使用者更新到此版本（新版本号：4.2）

全新安装插件基本没什么问题，如果您是升级插件，那么请一定要注意了（也可见压缩包内的readme.txt文件）：

如果从4.1.0及之前版升级，请在覆盖前禁用插件，然后再覆盖文件后期用插件；
如果已经在未禁用之前覆盖了文件，那么请打开模板目录的page.php和echo_log.php，找到“doAction('xiaosong', $log_content)”，替换为“echo $log_content”，注意，两个文件都要修改，否则文章不能正确显示；
有问题请至http://xiaosong.org/guestbook留言。

希望大家能提出自己宝贵的意见或建议。

插件的一些用法请见：http://xiaosong.org/share/emlog-wall-plug-in-reader

对了，由于大家对此模板意见很大（火狐下非常卡，版面很乱，评论的地方都找不到等等的问题），所以，我又要折腾模板了。。。

2012年5月6日修复一处php脚本报错的问题，具体问题可见21楼反馈的，感谢小牡的反馈，插件版本升级至4.2.1，建议升级至最新版~

jQuery placeholder插件

小松 — Sun, 25 Mar 2012 12:20:00 +0000

案例：整搜索框，需要默认占位符为“请输入关键词”，获取焦点时，占位符消失或不可用（不影响正常输入），丢失焦点后，若用户无内容输入，占位符继续出现，继续占位。这种代码我想前端们已经很容易就写出来了吧，现在HTML5原生就有这个“placeholder”属性，效果与上边案例描述的一样（各支持的浏览器内部表现可能不一致，但是作用是一致的），那么这一属性该怎么优雅降级到支持所有现代浏览器呢？答案还是脚本即JavaScript。

上述案例的一个图例：

普通状态：

获取焦点但未输入：

输入后：

注：获取焦点但未输入时的状态各浏览器表现有差异，但不影响功能。

下面是我自写的一个jQuery插件，我博客就在用，代码如下：

;(function ($) {
	$.fn.extend({
		placeholder : function () {
			if ("placeholder" in document.createElement("input")) {
				return this //如果原生支持placeholder属性，则返回对象本身
			} else {
				return this.each(function () {
					var _this = $(this);
					_this.val(_this.attr("placeholder")).focus(function () {
						if (_this.val() === _this.attr("placeholder")) {
							_this.val("")
						}
					}).blur(function () {
						if (_this.val().length === 0) {
							_this.val(_this.attr("placeholder"))
						}
					})
				})
			}
		}
	})
})(jQuery);

你可以通过脚本判断浏览器是否原生支持placeholder属性来动态加载这个脚本，代码如下：

if(!"placeholder" in document.createElement("input")){
	$.getScript("jquery.placeholder.js",function(){
		$("#keyword").placeholder();//让id=keyword的元素支持placeholder，换成你自己的选择器
	})
}

这样，高级浏览器就能调用原生方法，而不支持“placeholder”的浏览器就会通过脚本来模拟这一属性了，over！

关于《读者墙》插件的一点声明

小松 — Wed, 07 Mar 2012 10:20:00 +0000

由于之前emlog版本升级导致《读者墙》插件在emlog4.0.0以上版本中不起作用，我当时也没想太多，参照了一些插件的做法，直接通过php修改模板文件来实现目的，但是这给一些大意的童鞋带来了麻烦，有些童鞋好心分享一款自己原创或修改的主题，在自己的博客上测试都没问题的，但是分享出来之后就有用户反映说文章内容无法显示，究其原因就是本插件惹的祸，再次表示深深的歉意。

如果你要分享主题，而且你自己的博客启用了《读者墙》插件，那么，请你把你的模板文件里面的替换为默认模板，要不然别人真的会出问题的...我这边也在想其他的方式来实现插件的效果，希望能找到稳妥的方法吧，不行的话就找奇遇协助解决吧~

当然，我更希望官方能提供这样一个接口来，供我们开发者使用。最后，希望emlog越走越远，越来越好~

Win8去除桌面快捷方式箭头

小松 — Tue, 06 Mar 2012 03:00:00 +0000

折腾了将近一周的Win8了，用着很是舒服，要是现在有Win8的平板卖的话，真的要入手一台了！我公司的电脑和家里的电脑都是从Win7直接升级到Win8的，升级很顺利，但是桌面的快捷方式小箭头出来了。。。奇丑无比啊，咋办呢？本来一直用“魔方”取出小箭头的，可是Win8下着工具不好使了...网上找了好几个修改注册表的办法都不起作用，要么命名去除了，但是在选择文件那个对话框里面小箭头变成了一个黑块，更难看了...这是同事分享的一个工具，发上来，估计有人会需要吧。

我来一张去除小箭头后的截图吧：

没有了小箭头是不是很清爽啊~装了Win8的童鞋如果没有找到合适的去除小箭头的工具的话那就赶紧下载试试吧~

Windows 8 CP版初体验

小松 — Thu, 01 Mar 2012 05:00:00 +0000

期待已久的Windows 8 CP版终于在昨晚发布了，今天早上早早的起来坐公交去公司下载体验，先在虚拟机里面体验了把，感觉相当不错，界面有种简约但不简单的感觉。安装过程非常顺利，注册了个LIVE帐号，然后一切都这么顺~（比起PV版，这个CP版已经稳定好多了）连以前抛弃不用的微软拼音输入法都那么的给力，用起来很爽，而且有种手机输入法的味道，耐人寻味。以下是多P高清无码图，送给没能安装的童鞋们~（详细步骤就不写了，直接上图）

textarea宽度的2像素bug

小松 — Sun, 26 Feb 2012 06:20:00 +0000

其实在上一个模板“xiaosong-ajax”就已经发现这个问题了，当时觉得一定是自己哪里的样式导致textarea多行文本输入框宽度比样式里设置的增加了2px，后来在写现在这个“H5C3”主题的时候也发现有这个问题，而且很巧的是，这个模板里面也是比样式里设置的增加了2px，这么巧合的事会不是是浏览器的bug，或者我自己真心哪里没注意呢？有待考证，下午花了点时间写了个例子来验证自己遇到的情况。

代码很简单，只需要一点点html+css即可，我直接贴出来吧：

textarea 宽度

我是textarea，可是为什么一样的样式，我的宽度会比下面的多了2px呢？苦恼ing

可以看出，textarea和input的样式是一样的，那么我们来看看具体的浏览器的表现：

IE9：(注意右下角红框内)

chrome：(注意右下角红框内)

firefox：(注意右下角红框内)

很明显，上述3个浏览器都表现出了一个问题，textarea比input要宽，具体宽几个像素，我们看看chrome下调试工具告诉我们的：

很明显，textarea就是比input宽2px，可是我们样式里面明明设置的是400px，textarea为啥宽度会无缘无故变成了402呢？感兴趣的可以自行查看demo。

我暂定为浏览器bug，但是令人费解的是虽有浏览器都惊人的表现一致：宽度增加2px，我想有可能这不是bug，而是我自己知识面不够，哪里没注意到，但是问题究竟出在哪里呢？还望知情人士告知，不胜感激！

感谢4楼小子的分享，问题得到解决，附上解决方法：（在样式中加入如下代码：）

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing   : border-box;
	-ms-box-sizing    : border-box;
	-o-box-sizing     : border-box;
	box-sizing        : border-box;
}

上述代码可以加入到reset里面，至此2px的bug完美解决~大家可以修改后的demo。

不过还是不太明白浏览器为什么要有这样的默认行为，这样宽度无缘无故的变大还是有点风险的呢！令人费解！