小程序瀑布流布局效果及实现方式

　　不少开发者为了让小程序页面更加美观，所以会找很多方法去设置页面布局，最近比较流行的是小程序瀑布流布局，这个布局效果怎么样呢?如何实现?

　　小程序瀑布流布局效果

　　小程序瀑布流布局实现方式

　　虽然实现方式很简单，但是我起初没有想到，也是绕了很远的路才想到。当你看到下面的解决方案的时候，请不要说我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的的方法，但是由于太久没有学习css，所以也没有看到过column-*属*。

　　那么为什么第一时间会考虑纯css路线呢?其实是因为小程序没有dom操作，如果要按以往的开发小程序的规则，是没有办法实现瀑布流布局的。大家如果不相信也可以自己尝试一下，float达不到瀑布流的间隙插针的效果，所以纯float是不科学的。

　　前端小程序工程师看到瀑布流一般会想到小程序js数据库，或者jquery库，这些库的实现原理并没有什么差别，基本上都是使用了“绝对定位”进行计算布局。

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

　　总结

　　既然微信小程序没有Dom操作，可以通过css3的很多属*来解决一些小程序布局开发的问题。

　　小编在上文中详细介绍了小程序瀑布流布局的效果和实现方法，也提出了一些在开发过程中容易遇到的问题，希望能对大家有所帮助，更多相关资料请关注微信小程序商店。

　　微信小程序布局案例，小程序布局开发案例

　　微信小程序布局位置控制怎么实现?

　　微信小程序头像怎么布局?