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

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

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

0x01 我要自己实现!

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

用到插件:

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

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