Exemple de code CSS3 pour implémenter la disposition du flux en cascade de l'applet WeChat

Ce que cet article vous apporte est un exemple de code pour implémenter la disposition du flux en cascade d'une applet WeChat à l'aide de CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'attribut 1.column-count spécifie le nombre de colonnes par lequel les éléments doivent être séparés :

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

L'attribut 2.column-gap spécifie l'écart entre les colonnes :

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

L'attribut 3.column-rule définit les règles de largeur, de style et de couleur entre les colonnes.

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

4. L'attribut column-span spécifie le nombre de colonnes que l'élément doit s'étendre.
Internet Explorer 10 et Opera prennent en charge l'attribut column-span.
Safari et Chrome prennent en charge un attribut alternatif -webkit-column-span.
/Seuls Chrome et Opera prennent en charge l'attribut column-span. /

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

5.column-width attribut spécifie la largeur de la colonne.
Internet Explorer 10 et Opera prennent en charge la propriété column-width.
Firefox prend en charge une propriété alternative -moz-column-width.
Safari et Chrome prennent en charge une propriété alternative -webkit-column-width.
Remarque : Internet Explorer 9 et les navigateurs antérieurs ne prennent pas en charge l'attribut de largeur de colonne.

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

Disposition du flux en cascade du mini programme WeChat

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!