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

在去年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

评论列表

  • 评论者头像
    回复

    楼主,请教一个问题:我想获得瀑布流那个大容器的高度该怎么获取,我在ready,onload,甚至在ajax的complet写语句,获得的数都是0?求教!!!

    • 评论者头像
      回复

      @jellychow
      建议是在每次完成瀑布流时获取大容器高度,不要另外写语句获取,例如,如果你使用我的文章http://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 同时欢迎你们来访我们的网站。希望能和你们一起创造许多更加美好的东西。如果看到此留言,希望能通过邮箱回复我一下,谢谢! :-P

  • 评论者头像
    回复

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

1 2

回复

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