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

项目需求

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

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

对比了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效果

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

项目难点

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。本站所有内容均由李哒胖子原创,码字不易,欢迎打赏。如需在使用过程中有遇到任何问题,可以随时联系本人+V18003862798!!!

给TA打赏
共{{data.count}}人
人已打赏
7b2二次开发

7B2模板幻灯片组件美化修改

2023-10-30 11:19:58

7b2二次开发

7B2文章模块样式优化终极版

2024-1-30 15:07:59

2 条回复 A文章作者 M管理员
  1. 米苏

    似乎没有找到你的联系方式,想要咨询一下,功能增加。

    • 李哒胖子

      文章声明里面有我的微信 18003862798