在去年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
Pingback
评论列表
這個流体布局現在很流行
什麼時候發出來~~
@kkStx 晕，刚才没有打完就发布了！
@Kayo
写好了，欢迎围观！
亲。我也想来写个流体布局的主题了。
@Demon 嗯，最近写PHP程序，很久没有写WP主题了，下一个主题可能我也做一个流体布局的！
哇哦，很舒服哦。。。
喜欢这样的小清新！
@唯美图片 谢谢支持！
这种时候直接用第三方评论是最爽的~
你用用CMCC来上网，才知道前端的重要性~
反馈几个bug，图片的加载顺序貌似不对。
前后的图片先出来了，但是中间的图片没加载成功
@独自流浪 嗯，用第三方的评论就很方便了！嘻嘻，不过第一次写PHP程序，还是写个完整的好。
为什么用CMCC上网就会知道前端的重要性
图片的顺序是这样了，下一页会比当前页的图片旧，不过一个页面内的图片要根据高度排好，尽量减少缝隙，所以可能会不按时间排。
那个看不到的图片其实是有加载的，不过设置了透明，因为设计是要先透明，然后animate渐显，现在不知道是什么原因，有时候animate失效，给力修复中。
@Kayo
因为CMCC速度慢~
前端要照顾龟速网络的用户
@独自流浪 只能说做前端不容易啊，要照顾台式，笔记本，平板，连手机也要，还要兼顾N种浏览器
流布局啊。。。没尝试过，不会啊。。。演示网站速度的确慢啊
@zwwooooo 果然是速度悲催了，5刀以下的VPS都要看RP了，有些不错，有些很慢，ZWW有什么推荐的？
@Kayo
上CDN，部分文件设置浏览器缓存
我那个用CDN，感觉还不错
@独自流浪 咦，那你用的是哪个CDN？分享一个！
@Kayo cloudflare.com
@独自流浪 果断测试！
這麼多jQuery元素用掌機加載很痛苦的，
自己經常用掌機上網，
遂只保留了最基本的東西。
@小雞雞！ 这类jQuery布局的网站当然是做给PC的，掌机的话会杯具了！
現在流體佈局很火爆
可以弄成自動適應屏幕的
僅僅3列 大屏幕下有點空
可以用邊距百分比自動適應的
nav是亮點 這個設計的很人性化
生猛的支持ing
@心淡若水 嗯，现在开始流行自动适应的设计，我正在折腾jQuery-Mobile就能自动适应不同的屏幕！谢谢支持噢！
我比较喜欢这个排版
@周良 新的布局，喜欢就好！
嘿嘿 这个轻图床不错 底部的很漂亮的感觉
就是速度。。还要跟进哦~~
@netyang
悲催的速度又被投诉了，看来得赶快加速！
流体布局速度慢了,反而影像体验,有点反感了@cn
@牧风 嗯，流体布局需要一次加载N张图片，这对于普通的空间或VPS还是有点压力的！
你好，我根据楼主的js用ajax自动分页以及Masonry布局图片时，鼠标点击滚动条直接拉到最下面，经常会出现新加载的图片会跟之前页面加载的图片中间就一大段空白，请教楼主该bug怎么解决？
他的也是一大堆空白
楼主，请教一个问题：我想获得瀑布流那个大容器的高度该怎么获取，我在ready，onload,甚至在ajax的complet写语句，获得的数都是0？求教！！！
@jellychow
建议是在每次完成瀑布流时获取大容器高度，不要另外写语句获取，例如，如果你使用我的文章https://kayosite.com/lighthumbs-transfer-to-sae-and-improve-cascade-layout.html里的方法实现瀑布流，可以尝试在以下位置获取大容器高度，
$newElems.imagesLoaded(function(){
$container.masonry( ‘appended’, $newElems, true );
// 渐显新的内容
$newElems.animate({ opacity: 1 });
// 隐藏正在加载模块
$(“#page_loading”).hide(“slow”);
// 获取大容器高度
…
});
@Kayo console.log($container.height())取得的值是 0
@jellychow 直接在上面的地方用alert($container.height()); 就会弹出高度了，你是在哪里获取高度的？
@jellychow 我要感谢您才是！谢谢无私的分享~
@Kayo 我在ajax{complet:console.log(document.documentElement.offsetHeight)},加了，得到的数是很大的值，应该是div没进行瀑布流排版的时候的文档高度，然后在此处console.log(console.log($container.height()))的值又是0,这个数值让我很疑惑，求教
@jelly 很少使用console的命令，所以也不懂这个了，抱歉！
看了你们开发的图床程序，挺有感觉，不知道能不能加动态水印，就是能选择是否有水印在别人下载图片的时候会存在的这种功能，就更完美了。对了，这个程序能发给我一份么？挺喜欢这程序，我的邮箱stodiy@163.com 同时欢迎你们来访我们的网站。希望能和你们一起创造许多更加美好的东西。如果看到此留言，希望能通过邮箱回复我一下，谢谢！