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

在去年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 发表,本文链接:https://kayosite.com/new-lighthumbs-and-cascade-layout.html

评论列表

  • 评论者头像
    回复

    你这个图床程序有没有的下载啊?

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail