登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

查看: 190|回复: 2

WxMasonry-微信小程序实现瀑布流布局

[复制链接]

564

主题

1124

帖子

4560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4560

明星会员推广达人分享大神精品牛人活跃会员热心会员优秀版主颜值认证终身成就奖

发表于 2016-12-29 17:51:55 | 显示全部楼层 |阅读模式

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

WxMasonry-微信小程序实现瀑布流布局 https://github.com/icindy/WxMasonry103

效果(GIF加载中.... 稍候....)

WxMasonry-微信小程序实现瀑布流布局效果

先提一个问题,以免你们不看到最后
在微信小程序的循环列表中,如何实现图片的等比例缩放,这件事上我有尝试,但是效果不佳,欢迎交流解决方案!!

实现方式

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

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

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

实现方式

.WxMasonryView{
  column-count:2;
  column-gap: 10px;
  width: 100%;
}
.WxMasonry{
  width: 95%;
  background: #fefefe;
  border: 2px solid #fcfcfc;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 5px 2px 2px 2px;
  padding: 1px;
  padding-bottom: 5px;
  transition: opacity .4s ease-in-out;
  display: inline-block;
}

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

column-gap: 间距不提。

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

心酸历程

实际上在着手做瀑布流的时候,我想到过纯css的的方法,但是我没有看到过column-*属性,因为已经很久没有再次学习css了。

为什么会首先考虑纯css路线
原因很简单,微信小程序没有dom操作,如果按照常规的路线是无法实现的。纯float是不科学的,因为,你自己可以尝试,float达不到瀑布流的间隙插针的效果。

常规的瀑布流实现方式
前端工程师看到瀑布流的时候,会想到很对js库,或者jquery库,这些库的实现原理大同小异,基本上都是使用了“绝对定位”进行计算布局。

我的弯路
我毫不犹豫的想要按照常规的瀑布实现方式,但是没有办法实现那么多dom层级嵌套计算,所以想了很久没有想通,才跳回到纯css路线的,后面搜索发现了column-*属性,所以才浪费了很长时间。

总结

既然微信小程序没有Dom操作,可以通过css3的很多属性来解决一些问题

微信扫一扫\订阅移动开发及APP推广热点资讯\公众号:Code4App

0

主题

4

帖子

68

积分

程序猿

Rank: 2

积分
68
发表于 7 天前 | 显示全部楼层
楼主给的链接,GitHub上找不到怎么回事?

0

主题

8

帖子

105

积分

程序猿

Rank: 2

积分
105
发表于 6 天前 | 显示全部楼层
楼主刷新一下链接
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

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