你的位置:快乐忆站 \ 随写 \ 文章正文

瀑布流模板的一点感受

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

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

pinterest

pinterest

老王

老王

我的

快乐忆站

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

但是瀑布流终究还是适合做图片站,特别是美女之类的,一展示出来效果肯定惊艳,像我这样的博客站的话信息太多,图片又不养眼,所以给人看上去很花的感觉,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 瀑布流吧~

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 34#
    浮夸
    浮夸 Google Chrome 21.0.1180.60 Windows 7 2013-07-20 22:27 回复
    疑问?这瀑布流是不是一定要有图片,才会自动加载? 我试了很多类似的插件,都不自动加载。
    小松
    小松 Mobile Google Chrome  iPhone iOS 6.1.2 2013-07-21 07:41 回复
    @浮夸:不是,自动加载是自己设置的,插件不提供这个功能
  2. 33#
    阿修
    阿修 Firefox 19.0 Windows 7 2013-04-01 22:05 回复
    真的不是很喜欢瀑布流,看着总觉得有点头晕目眩的感觉
    小松
    小松 Google Chrome 26.0.1410.43 Mac OS X 10.8.3 2013-04-01 22:11 回复
    @阿修:辛苦你了,还看了我这么多文章~
  3. 32#
    凤凰平台
    凤凰平台 Firefox 17.0 Windows 7 x64 Edition 2013-02-01 17:35 回复
    不错,学习 否则还不懂   www.fenghuangcp.net
  4. 31#
    Biabootte
    Biabootte Firefox 12.0 Windows Vista 2012-11-14 09:32 回复
    te1
  5. 30#
    若蘭
    若蘭 Maxthon 3.4.1.1000 Windows XP 2012-07-30 14:24 回复
    最近怎么到处都是瀑布流啊,我觉得大量图集图片瀑布还很好。
    小松
    小松 Google Chrome 22.0.1215.3 Windows 8 x64 Edition 2012-07-30 18:45 回复
    @若蘭:对的,我之前介绍过,图片站适合,我也是随便玩玩的~
  6. 29#
    雨戟
    雨戟 Google Chrome 20.0.1132.57 Windows 8 x64 Edition 2012-07-27 00:37 回复
    瀑布流好花啊。
    小松
    小松 Google Chrome 18.0.1025.166 Android 4.0.4 2012-07-27 08:07 回复
    @雨戟:有点不适合个人博客,改版迫在眉睫啊
  7. 28#
    东东
    东东 Google Chrome 19.0.1084.56 Windows 7 2012-07-15 23:14 回复
    感觉这个模板真的很让人眼花缭乱~个人不是很喜欢。不过效果很赞,赞一下!
    小松
    小松 Google Chrome 22.0.1201.0 Windows 8 x64 Edition 2012-07-16 08:46 回复
    @东东:谢谢你的建议
  8. 27#
    Cement Science
    Cement Science Google Chrome 20.0.1132.47 Windows 7 x64 Edition 2012-07-05 15:21 回复
    确实有待用户习惯这种形式展示文字。
    小松
    小松 Google Chrome 21.0.1180.15 Windows 8 x64 Edition 2012-07-06 09:08 回复
    @Cement Science:我反正习惯了
  9. 26#
    零下零度
    零下零度 Google Chrome 21.0.1171.0 Windows 7 x64 Edition 2012-06-24 23:52 回复
    个性是有了,但是对浏览器要求高,要是更能平民话点就好了!~
    小松
    小松 Google Chrome 21.0.1180.4 Windows 8 x64 Edition 2012-06-25 08:40 回复
    @零下零度:别再为低版本的浏览器买账了,这样只会助纣为虐
  10. 25#
    小哲
    小哲 TheWorld Browser Windows 7 x64 Edition 2012-06-05 12:32 回复
    看着好不爽~
    睡觉~
    小松
    小松 Google Chrome 19.0.1084.52 Windows 8 x64 Edition 2012-06-05 14:33 回复
    @小哲:
1 2 3 4

随机日志:

推荐日志:

彩色标签:

sitemap