请选择 进入手机版 | 继续访问电脑版
来来来,看啊看,外面的世界多好看,

小程序之图片瀑布流(最全实现方式,额外加送懒加载)-1.gif
效果图展示的是瀑布流布局 && 懒加载的效果

数据
图片数据来源张鑫旭的网络日志
先说下我们的图片链接格式
所有的链接都是 http://cued.xunlei.com/demos/publ/img/P_${name}.jpg 这样的格式,我们需要改变name的值就行了,当 name 值小于10的时候,格式是 00x ,如 002 、 003 ,大于10的时候就是 023 这种。

定义
瀑布流布局是一种比较流行的页面布局方式, 最早采用此布局的网站是Pinterest, 图片宽度是固定的,高度自动,产生一种参差不齐的美感。

原理
原理很简单,主要分为以下几步
1、定义高度数组和列数
2、遍历元素,个数小于列数的直接 push 到数组中
3、大于列数的,获取高度数组中最小的值,定义元素的top和left值
4、 重要一点 更新高度数组,将最小高度加上当前元素的高度
知道原理了,代码应该怎么写呢?这里用web端来示例,大概如下
  1. [/code]
  2. 上面就是实现瀑布流的主要逻辑,这里大概写了下,接下来我们看看小程序怎么实现。
  3. [b]实现[/b]
  4. 在web页面里面我们可以直接获取、操作DOM,实现起来很方便,何况还有很多的jquery插件可以使用。我们知道小程序里面是没有DOM的,那应该怎么实现呢?我们把思路转换下就行了。
  5. 这里我们用三种方式来实现瀑布流布局。
  6. [b]CSS[/b]
  7. 使用css3来实现是最简单的,我们先捡简单的来说,
  8. 使用 column-count 属性设置列数
  9. 使用 wx-if 进行判断将图片渲染到左侧还是右侧
  10. [b]wxml[/b]
  11. [code]
复制代码
js获取下数据即可,这里就不赘述了。

节点信息

小程序可以通过WXML节点信息API来获取元素的信息,接下来我们来撸码。

wxml
  1. [/code]
  2. 可以看到实现的逻辑和上面的大概类似,只不过这里我们修改的是数据,毕竟小程序是数据驱动的嘛。
  3. 这里主要我们监听 image 组件的 bindload 事件来获取每张图片的高度,获取了高度才能进行布局,大部分的时间也都用来加载图片了,能不能优化呢?当然可以了,我们使用node把数据包装下。
  4. [b]后端处理数据[/b]
  5. 上面我们说到在小程序内部获取图片的高度是个费力不讨好的事,我们使用node来获取图片高度,然后包装下再给小程序使用。
  6. [list]使用request进行请求使用image-size获取图片的高度最后将获取后将数据写入文件,启动一个服务提供接口
  7. [/list]这里主要说下碰到的问题
  8. 1、request模块的请求默认返回来的是个String类型的字符串,使用image-size模块传入的必须是Buffer,怎么破呢?在request请求中设置 encoding 为 null 即可
  9. 2、我们这里爬取了100张图片,怎么保证都已经爬取完了呢?可以这样写
  10. Promise.all(List.map(item => getImgData(item)))  // getImgData函数是获取图片的函数 会返回个promise
  11. 3、如果请求了几次,发现有的图片获取不到了,报错了,怎么回事呢,人家毕竟做了防爬的,恭喜你中奖了,换个ip再试吧(可以把代码放在服务器上面,或者换个Wi-Fi),其实我们只需要爬一次就行,生成完文件还爬干嘛啊。
  12. 完整代码请戳 [b][i]github[/i][/b]
  13. 我们回到小程序,此时接口返回的数据如下
  14. 小程序之图片瀑布流(最全实现方式,额外加送懒加载)-2.jpg
  15. 可以看到每个图片都有高度了,接下来我们实现瀑布流布局,等下,我们搞下瀑布流布局的懒加载,关于小程序的懒加载,猛戳了解更多。
  16. 怎么实现呢?主要分为两步
  17. 1、将元素瀑布流布局
  18. 2、创建IntersectionObserver,进行懒加载
  19. 先开始我们的布局吧
  20. [b]wxml[/b]
  21. [code]
复制代码
上面我们使用 wx-if 通过 show 这个字段来进行判断了图片是否加载,
使用一个 view 组件用来占位,然后更改 show 字段就可以显示图片了
js
我们使用两个for循环,先来进行布局
[code][/code]
链接:小程序之图片瀑布流(最全实现方式,额外加送懒加载)-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部