轻图床的新前端与瀑布流布局

在去年12月的时候,Kayo 做的轻图床上线了,因为是第一个做的后台程序,所以大部分的时间都用于设计后台,而前台设计就相对简单, Kayo 使用了一段时间后,感觉没有“前端的味道”,于是重新做了一个新的 UI 。下面直接上图。

 

 

 

图片列表页(首页,排行榜,用户主页)采用流体布局,首页与用户主页还是瀑布流分页(流体布局 + 滚动触发的 Ajax 分页),本来瀑布流布局采用 Masonry jQuery plugin + Infinite Scroll plugin ,不过 Kayo 希望改变一下普通的瀑布流分页,普通的瀑布流布局是无限分页的,即滚动到页面底部时自动触发加载新一页,如果页脚是有内容的,或是用户希望稍停留在靠近底部的内容时就必须无奈的滚动到最后一页,况且只是一个 Ajax 请求,而 Infinite Scroll plugin 比较大,于是我还是根据实际情况量身写了个 Ajax 分页。关于 Ajax 分页会另写文章与大家分享。

 

另外在功能上也作了一些改进,主要包括评论邮件通知和游客评论系统,即没有注册的游客也可以评论,并且支持 Gravatar 头像,因为 VPS 本身的速度比较悲催,而 VPS 没有搭建邮件服务器(一开始用 sendmail 搭建了一个,速度慢得可怜,多翻折腾无果),因而采用 mutt + 腾讯企业邮发送评论邮件通知,所以评论速度不会太快,望各位谅解!

 

欢迎围观 lighthumbs.sinaapp.com 。效果: Fifefox = chrome = safari > opera > IE9 > IE8

2013/12/23 更新

轻图床已经全新改版,去掉原有的瀑布流布局,需要参考原有的瀑布流布局效果可以浏览这个另外制作的 Demo(只保留瀑布流翻页和第一张图片的链接,其他的功能入口已经去掉)。

 

有了新界面,有了“前端范儿”,就算是自己用着也舒服了,好了,赶紧柯南!

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/new-lighthumbs-and-cascade-layout.html

评论列表

  • 评论者头像
    回复

    這個流体布局現在很流行
    什麼時候發出來~~ :idea:

  • 评论者头像
    回复

    亲。我也想来写个流体布局的主题了。

    • 评论者头像
      回复

      @Demon 嗯,最近写PHP程序,很久没有写WP主题了,下一个主题可能我也做一个流体布局的! :mrgreen:

  • 评论者头像
    回复

    哇哦,很舒服哦。。。

    喜欢这样的小清新!

  • 评论者头像
    回复

    这种时候直接用第三方评论是最爽的~

    你用用CMCC来上网,才知道前端的重要性~

    反馈几个bug,图片的加载顺序貌似不对。
    前后的图片先出来了,但是中间的图片没加载成功

    • 评论者头像
      回复

      @独自流浪 嗯,用第三方的评论就很方便了!嘻嘻,不过第一次写PHP程序,还是写个完整的好。
      为什么用CMCC上网就会知道前端的重要性 :?:
      图片的顺序是这样了,下一页会比当前页的图片旧,不过一个页面内的图片要根据高度排好,尽量减少缝隙,所以可能会不按时间排。
      那个看不到的图片其实是有加载的,不过设置了透明,因为设计是要先透明,然后animate渐显,现在不知道是什么原因,有时候animate失效,给力修复中。

      • 评论者头像
        回复

        @Kayo
        因为CMCC速度慢~
        前端要照顾龟速网络的用户
        :mrgreen:

        • 评论者头像
          回复

          @独自流浪 只能说做前端不容易啊,要照顾台式,笔记本,平板,连手机也要,还要兼顾N种浏览器 :cry:

  • 评论者头像
    回复

    流布局啊。。。没尝试过,不会啊。。。演示网站速度的确慢啊

  • 评论者头像
    回复

    這麼多jQuery元素用掌機加載很痛苦的,
    自己經常用掌機上網,
    遂只保留了最基本的東西。

    • 评论者头像
      回复

      @小雞雞! 这类jQuery布局的网站当然是做给PC的,掌机的话会杯具了! :mrgreen:

  • 评论者头像
    回复

    現在流體佈局很火爆
    可以弄成自動適應屏幕的
    僅僅3列 大屏幕下有點空
    可以用邊距百分比自動適應的
    nav是亮點 這個設計的很人性化
    生猛的支持ing

    • 评论者头像
      回复

      @心淡若水 嗯,现在开始流行自动适应的设计,我正在折腾jQuery-Mobile就能自动适应不同的屏幕!谢谢支持噢!

  • 评论者头像
    回复

    我比较喜欢这个排版

  • 评论者头像
    回复

    嘿嘿 这个轻图床不错 底部的很漂亮的感觉
    就是速度。。还要跟进哦~~ :idea:

    • 评论者头像
      回复

      @netyang :cry: 悲催的速度又被投诉了,看来得赶快加速!

  • 评论者头像
    回复

    流体布局速度慢了,反而影像体验,有点反感了@cn

    • 评论者头像
      回复

      @牧风 嗯,流体布局需要一次加载N张图片,这对于普通的空间或VPS还是有点压力的!

  • 评论者头像
    回复

    你好,我根据楼主的js用ajax自动分页以及Masonry布局图片时,鼠标点击滚动条直接拉到最下面,经常会出现新加载的图片会跟之前页面加载的图片中间就一大段空白,请教楼主该bug怎么解决?

  • 评论者头像
    回复

    他的也是一大堆空白

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O