小程序仿instagram交互（附带长列表性能优化处理）

原文链接

传送门

需求

最近几天在忙着搞公司项目的一个新的需求，原因是这样的：公司准备开发一个偏向于社交娱乐项的小程序，其中首页是可以看到用户发的话题帖子之类的，每个帖子都至少包含一张图片或者一个视频， 然后产品那边希望首页可以实现instagram的交互效果，效果图如下：

嗯，大致上这个就是需求的背景，然后就是每个帖子的高度是不确定的，高度大概在500~600px之间。  

实现思路

一开始接到这个需求，其实我心里还是有点慌的，毕竟有一段时间不怎么接触小程序，也不知道小程序更新到什么程度，文档更新到什么程度。仔细分析一下项目需求，大致上可以归类为两个：交互 和 性能优化。

性能优化

因为首页是一个长列表，众所周知，页面一旦渲染的节点过多，就会卡顿，更何况是小程序，并且小程序是分为逻辑层和渲染层，两者通过setData链接，所以处理的时候需要注意两点：
1. setData的数据量不能太大，记得好像是有个大小限制，，忘了是多少，你们可以自己在官方文档上找一下；
2. 页面能够渲染的帖子数量是有限的，在这里，我是控制为最多渲染25个帖子。

针对于长列表的优化，官方也有相应的组件-[recycle-view](https://github.com/wechat-miniprogram/recycle-view)，但是貌似并不符合项目需求，所以被我pass掉了。
虽然没用官方的组件，但是在组件的文档里面把对于长列表得性能优化解释一遍，这里摘抄一下重点：
>​ 核心的思路就是只渲染显示在屏幕的数据，基本实现就是监听 scroll 事件，并且重新计算需要渲染的数据，不需要渲染的数据留一个空的 div 占位元素。

其实也就是设置一个变量控制该数据是否可以渲染，如果是不能够渲染得话，那我们就用一个空的view取代它，需要注意的失败的是：空的框架高度需要设置为帖子的高度，这样子才不会闪屏。

针对这种思路，我们就可以确定其中一种长列表的性能优化的解决思路：
1. 将数据分为二维数组，这样子就可以限制每次setData的数据量，等待数据渲染完成之后，获取每组数据所占用的总高度，这里的高度是为了在改组数据不渲染时设置占位框的高度。

/**
 * 获取 有渲染&#