WeChat アプレットのウォーターフォール フロー レイアウトを実装する CSS3 コード例

この記事の内容は、WeChat アプレットのウォーターフォール レイアウトを実装するための CSS3 コード例です。必要な方は参考にしていただければ幸いです。

1. column-count 属性は、要素を区切る列の数を指定します:

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

2。column-gap 属性は、列間のギャップを指定します:

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

3. column-rule 属性は、列間の幅、スタイル、色のルールを設定します。

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

4. columns-span 属性は、要素がまたがる列の数を指定します。
Internet Explorer 10 と Opera は、列スパン属性をサポートしています。
Safari と Chrome は、代替の -webkit-column-span 属性をサポートしています。
/Chrome と Opera のみが列スパン属性をサポートしています。 /

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

5.column-width 属性は列の幅を指定します。
Internet Explorer 10 と Opera は、column-width プロパティをサポートしています。
Firefox は、代替の -moz-column-width プロパティをサポートしています。
Safari と Chrome は、代替の -webkit-column-width プロパティをサポートしています。
注: Internet Explorer 9 以前のブラウザは、column-width 属性をサポートしていません。

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

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

うわー

以上がWeChat アプレットのウォーターフォール フロー レイアウトを実装する CSS3 コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。