微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 19659|回复: 35

微信小程序瀑布流布局模式

  [复制链接]
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    910

    主题

    2100

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2016-11-15 17:56:14 | 显示全部楼层 |阅读模式
    效果
    实现方式
    虽然实现方式很简单,但是我起初没有想到,也是绕了很远的路才想到。当你看到下面的解决方案的时候,请不要说我sb,因为我确实是没有想起来,太久没有学习前端知识,很多属性基本没有见过。
    • 使用css3的column-*属性
      • column-width
      • column-count
      • column-gap

    如果熟悉css3的朋友可能一下子就想起来了,但是我并没有 我是绕了一大圈才想起来
    • 实现方式
    1. .WxMasonryView{
    2.   column-count:2;
    3.   column-gap: 10px;
    4.   width: 100%;
    5. }
    6. .WxMasonry{
    7.   width: 95%;
    8.   background: #fefefe;
    9.   border: 2px solid #fcfcfc;
    10.   box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    11.   margin: 5px 2px 2px 2px;
    12.   padding: 1px;
    13.   padding-bottom: 5px;
    14.   transition: opacity .4s ease-in-out;
    15.   display: inline-block;
    16. }
    复制代码

    column-count: 用于分割几列,这样你就可以通过直接设置几列,而不用担心屏幕宽度,当然这里有个坑哈,就是图片自适应!
    column-gap: 间距不提。
    至于几个属性的使用,建议自己w3c一下
    心酸历程
    实际上在着手做瀑布流的时候,我想到过纯css的的方法,但是我没有看到过column-*属性,因为已经很久没有再次学习css了。
    • 为什么会首先考虑纯css路线 原因很简单,微信小程序没有dom操作,如果按照常规的路线是无法实现的。纯float是不科学的,因为,你自己可以尝试,float达不到瀑布流的间隙插针的效果。
    • 常规的瀑布流实现方式 前端工程师看到瀑布流的时候,会想到很对js库,或者jquery库,这些库的实现原理大同小异,基本上都是使用了“绝对定位”进行计算布局。
    • 我的弯路 我毫不犹豫的想要按照常规的瀑布实现方式,但是没有办法实现那么多dom层级嵌套计算,所以想了很久没有想通,才跳回到纯css路线的,后面搜索发现了column-*属性,所以才浪费了很长时间。

    总结
    既然微信小程序没有Dom操作,可以通过css3的很多属性来解决一些问题。
    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2016-12-12 20:05
  • 签到天数: 2 天

    [LV.1]初来乍到

    0

    主题

    5

    帖子

    53

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2016-12-12 20:40:07 | 显示全部楼层
    学习 学习
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    20

    帖子

    112

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-1-4 09:49:41 | 显示全部楼层
    正需要,支持楼主大人了!

    该用户从未签到

    0

    主题

    4

    帖子

    129

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-2-14 02:07:50 | 显示全部楼层
    我来看看是什么情况

    该用户从未签到

    0

    主题

    25

    帖子

    113

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-7-20 11:02:25 | 显示全部楼层
    ggggggggggggggggggggggggg

    该用户从未签到

    2

    主题

    8

    帖子

    179

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-7-23 11:34:08 | 显示全部楼层
    新手学习
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    17

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-10-17 21:41:09 | 显示全部楼层
    66666666666666666666666

    该用户从未签到

    0

    主题

    4

    帖子

    19

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-11-23 11:21:33 | 显示全部楼层
    支持一下
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    83

    帖子

    308

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-12-5 15:51:17 | 显示全部楼层
    6666666666666666

    该用户从未签到

    0

    主题

    5

    帖子

    19

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-12-28 09:28:29 | 显示全部楼层
    111111111111111
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略

    QQ|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1|网站地图   

    GMT+8, 2022-1-20 18:43 , Processed in 0.152139 second(s), 53 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表