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

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

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

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！

    Coser

    下载地址