WxMasonry微信小程序瀑布流布局模式
2017-06-14 10:10
387 查看
效果
github地址
WxMasonry-微信小程序实现瀑布流布局 https://github.com/icindy/WxMasonry先提一个问题,以免你们不看到最后
在微信小程序的循环列表中,如何实现图片的等比例缩放,这件事上我有尝试,但是效果不佳,欢迎交流解决方案!!实现方式
虽然实现方式很简单,但是我起初没有想到,也是绕了很远的路才想到。当你看到下面的解决方案的时候,请不要说我sb,因为我确实是没有想起来,太久没有学习前端知识,很多属性基本没有见过。使用css3的column-*属性
column-width
column-count
column-gap
如果熟悉css3的朋友可能一下子就想起来了,但是我并没有 我是绕了一大圈才想起来
实现方式
|
column-gap: 间距不提。
至于几个属性的使用,建议自己w3c一下
心酸历程
实际上在着手做瀑布流的时候,我想到过纯css的的方法,但是我没有看到过column-*属性,因为已经很久没有再次学习css了。为什么会首先考虑纯css路线 原因很简单,微信小程序没有dom操作,如果按照常规的路线是无法实现的。纯float是不科学的,因为,你自己可以尝试,float达不到瀑布流的间隙插针的效果。
常规的瀑布流实现方式 前端工程师看到瀑布流的时候,会想到很对js库,或者jquery库,这些库的实现原理大同小异,基本上都是使用了“绝对定位”进行计算布局。
我的弯路 我毫不犹豫的想要按照常规的瀑布实现方式,但是没有办法实现那么多dom层级嵌套计算,所以想了很久没有想通,才跳回到纯css路线的,后面搜索发现了column-*属性,所以才浪费了很长时间。
总结
既然微信小程序没有Dom操作,可以通过css3的很多属性来解决一些问题。代码下载
下载代码压缩包相关文章推荐
- WxMasonry微信小程序瀑布流布局模式
- 微信小程序实现瀑布流布局与无限加载的方法详解
- 微信小程序中实现瀑布流布局和无限加载
- JS瀑布流布局模式(1)
- 微信小程序学习笔记(7)--------布局基础
- 微信小程序学习用demo:瀑布流及登录后页面刷新
- 网站瀑布流真实体验,最近网络流行瀑布流布局模式
- 微信小程序弹出loading层的两种方法:直接在代码里控制,在wxml文件里布局弹窗loading层,利用条件渲染,在js代码里控制是否显示loading层。
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
- 微信小程序的编程模式
- 微信小程序开发:Flex布局
- 微信小程序新单位rpx与自适应布局
- 微信小程序 Flex布局详解
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
- JS瀑布流布局模式(2)
- 【微信小程序】布局插件:wxgrid
- 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案
- 微信小程序开发详解(九)---微信小程序布局基础