CSS3 code example to implement waterfall flow layout of WeChat applet

The content of this article is about the code example of using CSS3 to implement the waterfall flow layout of the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The column-count attribute specifies the number of columns by which elements should be separated:

-moz-column-count:3;     /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;

2. The column-gap attribute specifies the gap between columns:

-moz-column-gap:40px;        /* Firefox */
-webkit-column-gap:40px;    /* Safari 和 Chrome */
column-gap:40px;

3. The column-rule attribute sets the width, style, and color rules between columns.

-moz-column-rule:3px outset #ff0000;    /* Firefox */
-webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
column-rule:3px outset #ff0000;

4. The column-span attribute specifies how many columns the element should span.
Internet Explorer 10 and Opera support the column-span attribute.
Safari and Chrome support an alternative -webkit-column-span attribute.
/Only Chrome and Opera support the column-span attribute. /

-webkit-column-span:all; /* Chrome */
column-span:all;

5.column-width attribute specifies the width of the column.
Internet Explorer 10 and Opera support the column-width property.
Firefox supports an alternative -moz-column-width property.
Safari and Chrome support an alternative -webkit-column-width property.
Note: Internet Explorer 9 and earlier browsers do not support the column-width attribute.

column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari 和 Chrome */

WeChat applet waterfall flow layout

wxml

<view class=&#39;case-page&#39;>
  <view class=&#39;list-masonry&#39;>
    <view class=&#39;item-masonry&#39; wx:for="{{note}}">
      <image src=&#39;{{item.url}}&#39; mode=&#39;widthFix&#39;></image>
      <text>{{item.title}}</text>
    </view>
  </view>
</view>

wxss

page{
  background-color: #eee;
}
.case-page{
  padding:20rpx;
}
.list-masonry{
  column-count: 2;
  column-gap: 20rpx;
}
.item-masonry{
  background-color: #fff;
  break-inside: avoid;/*避免在元素内部插入分页符*/
  box-sizing: border-box; 
  padding: 20rpx;
  margin-bottom:20rpx;
}
.item-masonry image {
  width: 100%;
}

JS

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgWidth: 0, imgHeight: 0,
    note: [
      {
        title: '案例名称',
        url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
      },
      {
        title: '你所不知道的红酒知识',
        url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
      },
      {
        title: '红酒知识',
        url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
      },
      {
        title: '案例名称',
        url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg',
      },
      {
        title: '案例名称',
        url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
      },

      {
        title: '案例名称',
        url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
      },
      {
        title: '案例名称',
        url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg'
      },
      {
        title: '案例名称',
        url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'
      },
      {
        title: '案例名称',
        url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
      }
    ]
  }
})

The above is the detailed content of CSS3 code example to implement waterfall flow layout of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!