VShare——响应式分享平台

发布于 / 技术 / 2 条评论

一、介绍

该项目灵感来源于VSCOM(一个图片分享站),最初被其优雅的UI设计所吸引,也因为前端基础知识的薄弱及开发经验的缺失,我想着正好利用创新实践的这次机会巩固知识,提高自己的布局水平。

二、构思

最初利用了三天时间,完成了对VSCOM所有的仿造,响应式的主页、个人中心、图片瀑布流、图片详情页的照片参数设计及点赞特效。但是由于东西太少了而被老师打回。于是我开始思考为什么就止步于仿照他人的成品而不自己构思一款产品,于是VShare应运而生——一个范围更大的分享平台,一个比VSCOM更好,功能更全面更完善更优美的分享平台!

三、组成

1、主页

考虑到移动端的触摸问题,Android与iOS系统可能会对手势操作不兼容,我使用了jQuery插件OnePage实现了单页/全屏滚动。

2、登录页

由于无后台api,暂时将账号信息写死在js里,登录框的表单使用基于bootstrap的插件,实现了响应式,背景图使用bing的api达到每天动态更换。

3、文章页

文章目录页参考了自己的博客的布局及样式,为了更方便的实现响应式使用了bootstrap,但是不同分辨率下的文章摘要的显示费了很大功夫,如禁止在分辨率变小时自动换行,超出宽度的文字需要设定隐藏,这些涉及到的css知识较为生僻,是以前没有遇到过的。而灵活运用fontawesome等图标字体库可以省很多力气。

文章具体页也参考了自己博客的样式,最末尾的分享功能,解析了QQ空间的分享URL,找到关键字段,用js实现URL拼接。

4、瀑布流

对瀑布流样式进行了重写,用CSS实现了相框效果,用jQuery插件模拟了无限加载,用雪碧图实现了具体图片页面的点赞特效,用api实现了经纬度转换为拍照地图,用fontawesome实现图片不同参数的样式。用bootstrap完成响应式布局。

5、个人中心

个人中心头部仿照新浪微博样式,内容区域实则为瀑布路中的不重复的图片,意为个人上传的作品,在此处可进行单张图片的删除及上传图片进行审核。上传作品分为两块,使用material design的右下角圆形按钮,点击后显示基于Layer的上传层,图片上传时可预览内容,点击上传后出现正在审核标志。文章投稿视为管理员审核所以不会出现在个人中心处。

6、关于

在这里我展示了项目的有关开发信息及开发平台,中间用CSS仿造了sublime窗口,底部使用valine评论系统。

7、图灵机器人

利用其api开发聊天机器人遇到的问题主要是如何进行响应式的聊天界面设计,如何使用js进行输入框发送后的显示,输入内容如何发送给api,对返回结果进行的处理及显示。

四、项目地址

Github: https://github.com/FatDoge/VShare

Demo: http://hduzjh.cn

五、感想

愈发坚定了学习模块化编程的方向,22个静态页面,超多的冗余,每个页面分别引用重复的依赖。

  1. avatar

    我抢一楼,做的很漂亮,以后可以请教下吗。

    1. avatar
      @共勉。 请教谈不上,一起交流呀😃