CSS3 code example to implement waterfall flow layout of WeChat applet-CSS Tutorial-php.cn

CSS3 code example to implement waterfall flow layout of WeChat applet

不言

Release： 2019-01-24 10:47:05

forward

4747 people have browsed it

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;

Copy after login

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

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

Copy after login

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;

Copy after login

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;

Copy after login

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 */

Copy after login

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>

Copy after login

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%;
}

Copy after login

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'
      }
    ]
  }
})

Copy after login

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!