[项目]Coser街 - Cosplay交流展示画廊

这个Coser街是一个展示Cosplay作品的一个相册平台，以供感兴趣的朋友学习借鉴。非常感谢@思源（ http://isiyuan.net ） 的大力帮助，另外借助三个开源Jquery组件，才能在最短时间内完成！

整体体验还不错，粉色少女风格，主要原因里面都是妹子…

记录一下比较有意思的几个地方吧！

0x01 我要自己实现！

自己实现固然好，但效果就没有前辈的优秀，所以真香警告！本项目中主要涉及到，瀑布流+上拉加载+图片浏览 这三部分，兼容性还算不错

用到插件：

• https://github.com/sachinchoolur/lightGallery
• https://github.com/cbopp-art/lightcase/
• https://masonry.desandro.com/ ( http://sc.chinaz.com/jiaoben/150221174980.htm ) ，github上的一直报错，这谁顶得住啊…

可以说这几个插件很棒，以后其他项目中可以参考应用一下，体验不错！

0x02 留下的问题

浏览器滚动条自定义后，iframe 框架 100% 宽高会增加自定义滚动条宽度，导致 iframe 页面出现滚动条。

解决办法：使用的是插件，采用100%宽高加载页面，打算使得宽高减少对应的滚动条宽度，需要在插件中修改函数计算部分

瀑布流上拉加载多次触发事件

解决办法：之前文章讲到的 js 节流方法可以解决

lightGallery报错

解决办法：不要直接使用 Github 上的，源码中的 lg_thumb.min.js，有点问题，一直报：Jquery is not defined，所以建议到上述下载地址下载

lightCase加载Iframe页面

解决办法：接触过 layui 的应该知道，layui 的弹出层非常好看，扁平化的风格，其次，lightCase 可以加载 iframe 页面，所以这样在目录下可以使用 PHP 文件接受参数的方式，来实现类似 Pjax 的效果。

0x03 数据来源问题

提供几个参考方法：

• 注册付费成为 VIP用户，可以看所有的图片，API 以该账号访问读取资源
• 自己偷，自己琢磨（也可以找个好伙伴一起琢磨）

0x04 预览地址

Coser街 - http://cos.top15.cn

0x05 总结

前端开发中，作为学习还是老老实实写，去实现，再在使用别人框架的时候，编写代码的过程就会很快乐，真的是 Coding 如飞。最后再次感谢思源小伙伴的帮助，接下来准备啃 Vue！