注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!

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

小程序 开心洋葱 2880次浏览 已收录 1个评论 手机上查看

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

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

先提一个问题,以免你们不看到最后

在微信小程序的循环列表中,如何实现图片的等比例缩放,这件事上我有尝试,但是效果不佳,欢迎交流解决方案!!

实现方式

> 虽然实现方式很简单,但是我起初没有想到,也是绕了很远的路才想到。当你看到下面的解决方案的时候,请不要说我sb,因为我确实是没有想起来,太久没有学习前端知识,很多属性基本没有见过。
> 如果熟悉css3的朋友可能一下子就想起来了,但是我并没有 我是绕了一大圈才想起来

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

心酸历程

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

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

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

瀑布流布效果百度网盘下载链接: https://pan.baidu.com/s/1nvLSrW1 密码:

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!

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

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


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明微信小程序实现瀑布流布局效果
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 借来研究先
    xiaoniao2017-09-12 12:28 Windows 7 | Chrome 58.0.3029.110
……
加载中……