E企盈营销工具技术服务商 热线:4006-838-530

瀑布流布局流式布局不规则图文排列布局微信小程序按顺序排列的瀑布流布局

E企盈直播平台营销卖货系统

微信小程序按顺序排列的瀑布流布局首先我说一下,我的项目需求:瀑布流布局排列按照一定的顺序排列图文结合不好意思,跟大家分享下我的过程,不想看的直接跳过看最后,起初的实现思路是:1、由于图片是从后台获取的,大家都知道image 有一个bindload事件,就是图片加载完成,就是在图片加载完成后获取到该图片的高度,然后通过既定的宽度,算出图片的实际显示高度。2、知道了图片的实际显示高度,就该计算图片到底是放在左边还是右边,为了方便计算,我们将所有图片列表一分为二,然后如果左边小于等于右边,就将刚加载完成的这张图片放在左边,很容易这样就形成了瀑布流。当然这些可能都是大家所熟知的。3、瀑布流实现了,可是每个图片加载完成的顺序跟后台给的顺序不同,导致每次打开瀑布流看到的顺序都不同,不符合我们的需求。第一次调整:为了达到按照后台给的顺序排列,我们做了下列调整:多添加了一个事件,利用index 控制每次按照顺序 加载下一张,然后根据高度再决定放左边还是右边,哇塞,功夫不负有心人,果然实现了,可是问题又来了,呵呵哒,要求的顺序也做到了,加载速度慢的想砸手机(哈哈哈……只是某些手机特别慢啦),毕竟我们的小程序是供老年人用的,所以……你懂的,第二次调整:如何让加载速度变快一些呢?当然要排除额外付费的情况,哈哈哈……经过分析,为什么加载速度慢?首先每次图片加载的时候都要重新计算高度,所以我们想到了,在后台的数据中添加了图片的宽度和高度的值,这样就避免了每次都要在bindload时计算图片的实际显示高度,可以从后台获取列表对数据处理的同时,直接拿到高度,然后根据宽高比,计算出高度,然后根据左右两边高度比较,确定放置在哪一边,然后将高度加在左边或右边。这样实现的好处第一:无需等图片加载完毕,就可以确定图片放置的位置,第二,可以无需考虑之前的排序问题。第三:代码缩减了N行第四:加载速度超级快呀(这才是我想要的啦)抱歉给你们看了这么多废话,下面是重点:效果是这样滴有需要的朋友可以直接去下载demo ,如果觉得还可以借用您发财的小手为我点亮star,地址为:https://github.com/taurus888/waterFlowDemo原谅我是个娃娃控

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 瀑布流布局流式布局不规则图文排列布局微信小程序按顺序排列的瀑布流布局
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏