小程序之实现瀑布流布局

什么叫瀑布流?

简而言之,就是(参差不齐的多栏布局)的形式。
Android客户端一般是通过RecyclerView的方式来进行实现,但在小程序中并没有类似的控件,所以我们只有通过自己的改编来进行实现。

具体布局:

  • 页面主要分成两列,每个条目的高度不固定,条目主要由封面图+标题+头像+发布者昵称组成

  • 多列排列要求,第一条在左侧,第二条在右侧,后续的根据左右两栏的高度,依次放置在高度较低的一侧。

实现思路:

  1. 将整个页面分成左右两栏,两侧各对应一个数据集。

  2. 定义变量,记录左右两侧的累计高度,然后依次将条目放置在高度较低的一侧。从而我们可以得到左右两侧的数据集,后续只需要进行页面的渲染就行了;

  3. 图片高度的确定,单个条目中图片宽度=(单列条目宽度/图片的原始宽度)*图片原始高度;

[实现代码看没有故事的男童鞋的文章](https://www.jianshu.com/p/c7c2b5c425bc

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容