欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
实现瀑布流布局模式实现瀑布流布局模式
立即下载

实现瀑布流布局模式

模板分类 : 小程序模板 模板编号 : Y888 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-03-10 09:27 模板等级 : ☆☆☆☆☆

模板截图:

实现方式

虽然实现方式很简单,但是我起初没有想到,也是绕了很远的路才想到。当你看到下面的解决方案的时候,请不要说我sb,因为我确实是没有想起来,太久没有学习前端知识,很多属性基本没有见过。

  • 使用css3的column-*属性
    • column-width
    • column-count
    • column-gap

如果熟悉css3的朋友可能一下子就想起来了,但是我并没有 我是绕了一大圈才想起来

  • 实现方式

column-count: 用于分割几列,这样你就可以通过直接设置几列,而不用担心屏幕宽度,当然这里有个坑哈,就是图片自适应!

column-gap: 间距不提。

至于几个属性的使用,建议自己w3c一下

心酸历程


加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。