自己码的图片博客,自适应布局,手机和电脑都打开看一下。
JavaScript设置为所有元素加载完毕才开始执行,因此网速慢时要等一等才能点击
预览链接:
https://combo819.github.io/myPhotoBlog/index.html
很早之前就想拥有一个自己的博客,学了前端开发后终于实现了这个愿望。这个网页是用原生JavaScript搭的,里面展示的图片是从2016年到现在的部分摄影作品。因为这个网站是为了检验前端技术,所以选取的图片也只是意思一下,更多图片请关注底部的社区。 此网站在Chrome下调试开发,但也考虑了浏览器兼容性的问题。经测试在Chrome, safari, FireFox,Edge以及IE 10(允许控件)下都能正常运行,但在IE 9下边框会出现错误。目前本网页共有6个页面,首页,瀑布流,分类浏览,微信文章,网站开发总结,以及我的个人介绍。 在任何页面点击左上角logo都能回到首页。值得一提的是,本网页的大部分动画效果都调用了封装的缓动函数buffer,使得动作过渡更加平滑。
本网站基于CSS3 @meida 和 JS windows.onresize做了适配移动端的自适应设计。总体上分为:屏幕宽度小于414px(iphone* plus),414px~768px(ipad竖屏),768px~1024px(ipad横屏),1024px~1280px以及1280px以上。比如顶上的状态栏,当屏幕缩小时,一些次要元素会逐个消失,最后导航栏被折叠。底部在小于414px也会有新的排布。具体页面设计方式下文细说。网页配色基本为黑白灰,布局上追求极简。Bug报告:617512696@qq.com
TodoList:
进一步适配手机
完善留言和搜索栏功能
搬运更多图片
开发英文版
当鼠标进入图片区域时,左右按钮出现。按左右按钮图片会向前向后滚。点击滚图将会跳转到相应的页面。五张滚图的宽度,绝对定位,透明度,z-index等CSS装在一个json里面,当按左右按钮是,通过pop-unshift和shift-push操作来将json内的CSS信息更新,然后再由缓动函数buffer重新读取json来对滚图重新排位。 动画效果在Edge下会有少许卡顿。
当屏幕宽度小于1280px时,左右按钮会一直出现(考虑到移动端无法mouseover)。当屏幕宽度缩小到768px时,滚图照原先排布按比例缩小一半。当继续缩小到414px,又按比例缩小一半。本来在小屏上准备通过左滑和右滑来切换滚图。但是原生js对滑动太不友好,因此用缩小的按钮代替。
瀑布流每次加载20张图,往下拉到底会触发加载新的20张图,由于本地图库有限,瀑布流会在102张图片里循环。点击右下角的Top会缓动回到顶上。点击瀑布流中的任意图片能浏览大图,再点大图能跳转到我的Lofter首页,点击黑色遮罩退出大图浏览。
这是花费时间最长的一个板块。参考网上已有的瀑布流代码,发现根本没法形成效果。网上示例的瀑布流是小图,而我用来瀑布流的素材图比较大,加载慢,又由于浏览器异步执行Javascript(好坑爹的语言),导致瀑布流布局函数无法读取到图片的高度。只能在外部用.bat生成每个图片的宽高,再写成一个json,让程序直接读取每个图片的高度。后面又遇到重复执行的函数读取返回值作为参数的问题,后面终于把这个问题解决。因此这一部分可能存在一些冗余代码,后面考虑继续简并。
最大屏幕时,每行显示三个图片格子,当屏幕缩小到1024px后,修改排布瀑布流的宽度,每行显示格子变为两个。继续缩小屏幕会变成一个图片格子。但改变屏幕(浏览器)宽度后,需要手动刷新才能重新排布。理论上讲,瀑布流该要能随屏幕宽度变动而自动重新排布的。我想过在最外层加一个setIntevral,但这恐怕会很耗费性能。而这一页面的JS各种函数参数犬牙交错,我没法在短时间内在内部改好,所以只能靠手动刷新将就一下。当然,新打开网页都是适配浏览器宽度的。
本页分为“人文”,“风光”,“日系”三个风格的板块,点击三个选项卡能切换版面,选中的显示为橙色。当鼠标悬浮在图片上时会有遮罩下来,点击图片会跳转到Lofter相应的图集。
遮罩在每一张图片的上方,超出区域不显示,当鼠标悬浮时,调用缓动函数将遮罩位移下来。板块内的布局用flex.
本页随着屏幕(浏览器)宽度缩小,布局区域宽度也会缩小,高度增加。每行开始排三个格子,到排两个,最后排一个。布局区域改变后,用flex能自动重新排布。
从我的微信订阅号上扒了九篇文章下来,刚好排一个九宫格。当鼠标悬浮在每个格子上时,格子会向左上角跳起。点击图片会跳转到微信订阅号的此文章页面。
这一块用到的技术不多,布局用flex,格子的效果也只是用CSS3的:hover而没有用JavaScript。
跟上面一样,随着屏幕(浏览器)宽度缩小,布局区域宽度缩小,高度增加,然后每行开始排三个,到排两个,最后排一个。再通过flex自动布局。
即本页面,制作网页的总结。本页给每个页面分配了一个格子放文章段落。因为文档太长,所以再右下角做了个电梯导航特效。点击后会把滚动条送到相应的楼层,当鼠标滚动滚轮时,右边的电梯也会自动检测所在楼层并用白色底色显示出来。
本页面用了简单的标准流排布。开始先用一个数组floorHeightArr存储每个格子的offsetTop,代码检测到ScrollTop再与数组中的值对比来求出需要高亮的电梯层数。但在大屏幕时,最后一个格子+底部栏高度还没屏幕高时,会导致滚动条到不了最后一个格子却不断贴着底部的情况。用一个循环将floorHeightArr数组里大于最后一屏深度的值替代为最后一屏的深度,因此解决。
当屏幕(浏览器)宽度减小时,整体高度随着变高,各个段落的深度(offsetTop)发生变化。因此加了一个setInterval来不断更新floorHeightArr数组。随着屏幕(浏览器)宽度减小,每个楼层宽度跟着减小,高度增加。右边的导航电梯往更右边靠拢。当屏幕宽度小于414px,屏幕不滚动时导航电梯隐藏,滚动后出现三秒再消失。
我的自我介绍。下面有一个(未完工的)留言板块,在textarea内写下留言并点击发表,留言会出现在下方。输入的不得为空或超过八十个字符。留言在每次关闭后被清除。 这个留言功能是先取得textarea里面的值,再动态地往div内添加li而生成的。每增加一条留言就通过js为总高度添加40px,删除时减回40px。