自己码的图片博客，自适应布局，手机和电脑都打开看一下。
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。