7B2主题优化之无间距瀑布流模板

项目需求

在日常的编码工作中，有一天我接到了一个兄弟的请求，他希望我能对瀑布流进行改造，使其变为无间距模式。相比于传统的瀑布流布局，无间距模式在各种场景下都更加适用。特别是在如今AI绘画风靡一时的时代，瀑布流布局能更好地展示AI绘图的作品。

对比了72B的原本瀑布流，我们的新结构需要删除部分输出结构，再配上图片的hover样式。需求分析的差不多，立即着手安排工作。

项目分析

7B2的日常文章展示模块共有6中默认样式，适用最多的便是网格，瀑布以及图文模式。对应的文件地址是Modules\Templates\Modules\post.php文件。前端展示的HTML结构是在post_2,开始。瀑布流JS插件则是使用了packery 。使用方式也很简单。只需要


var pckry = new Packery( elem, {
// options
itemSelector: '.grid-item',
gutter: 10
});


找到了JS和模板文件就可以开始着手做项目改造了。这是完成后的DEMO效果

项目难点

实际开发中，在删除了不必要的元素，在重构了样式以后遇到了一个比较大的问题就是absolute布局了。这种布局方的坑真心不小，会导致首次加载部分图片重叠错乱（或因为懒加载的加载顺序问题，亦或是JS插件原本就有这个问题）。巴拉了官网的api doc以后，依旧是没有比较好的解决方案。在做调试的时候，经常性的会缩小窗口，经过二次计算的瀑布流瞬间整整齐齐。期间尝试了z-index属性，windowsresize,overflow:hidden。都不能很好的解决问题。既然无法用样式解决。那就试试把 Packery二次运行。最终在不懈的努力下。终于找到了突破口，一般在用户加载完都会习惯性往下滚动查看，我就尝试做了个滚动监听事件，在用户滚动时，重新new Packery. 但是这样会增加运行内容，再次将滚动监听。换成滚动执行一次，便再不执行。最终问题得到圆满解决。