CSS で動的な画像の 9 グリッド レイアウトを実装するためのサンプル コード

CSS で動的な画像の 9 グリッド レイアウトを実装するためのサンプル コード

前提条件: content="width=750"

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

効果図は以下のとおりです。

需要分析

高さと幅:

1枚 [幅320、高さ320] [下書きサイズの2倍]
画像2枚の場合 [幅332、高さ332]
3枚、4枚、6枚、7枚、9枚 [幅220、高さ220]
5枚または8枚の画像の場合、[4枚目と5枚目の画像の幅と高さは332]、[残りの画像の幅と高さは220]

間隔:

画像が 2 枚ある場合、最後の画像には左余白のみがあります。
3枚ある場合、2枚目の左右の余白
画像が4枚ある場合、[2枚目]と[最後の画像]は左方向のみ余白があり、[3、4]は上方向に余白があります。
写真が 5 枚ある場合、最後の写真には左余白のみがあります。
写真が6枚または7枚ある場合、2枚目と4枚目には左右の余白があり、4枚目以降は上部に
写真が8枚ある場合、2枚目と4枚目は左右の余白があります。4枚目以降は上に余白があり、最後の写真は左側のみ余白があります。
9枚ある場合、[2枚目、4枚目、8枚目]には左右の余白がある

丸い角10:

画像が1枚の場合、[すべて]角が丸くなります
2枚の写真、3枚の写真 - [1枚目の写真は左上、左下]、[最後の写真は右上、右下]
写真が4枚ある場合、[1枚目左上]、[2枚目右上]、[3枚目左下]、[最後の写真右下]
写真が5枚ある場合、[1枚目左上]、[3枚目右上]、[4枚目左下]、[最後の写真右下]
写真が6枚ある場合、[1枚目左上]、[3枚目右上]、[4枚目左下]、[最後の写真右下]
画像が7枚ある場合、[1枚目左上]、[3枚目右上]、[7枚目左下、右下]
写真が8枚ある場合、[1枚目左上]、[3枚目右上]、[7枚目左下]、[最後の写真右下]
写真が9枚ある場合、[1枚目左上]、[3枚目右上]、[7枚目左下]、[最後の写真右下]

誘導

私たちは中学校で数学の帰納法を学びました。これは、まず命題がn=1のときに真であるかどうかを調べ、次にn=kのときに真であると仮定し、n=k+1のときにも真であることを証明し、それによって命題がn=k [kは任意の実数]のときに真であることを証明するというものです。

コード

<div class="grid-img-box">
    <van-image class='grid-img' v-for="data.photo の値" :key="値" fit="カバー" :src="値" />
</div>

.grid-img{

  /**
  幅と高さ 1. 3n+1 で、最後から 2 番目の画像です。 2. 3n+1 で、最後の画像です。 どちらの場合も、画像の幅と高さは 320 である必要があります。
      残りの2つのケースは次のとおりです。
    3. 画像が 1 枚しかない場合は、幅と高さは 320 です。
    4. その他のケースとインデックスでは、幅と高さは両方とも 220 です。
  */
  表示: インラインブロック;
  幅: 220ピクセル;
  高さ: 220px;
  &:一人っ子{
    幅: 320ピクセル;
    高さ: 320px;
  }

  &:n番目の子(3n+1):最後のn番目の子(2),
  &:n番目の子(3n+2):最後の子{
    幅: 332ピクセル;
    高さ: 332px;
  }

  /**
  間隔/レイアウト*/

  &:n番目の子(3n+2){
    マージン: 0 6px;
  }
  &:n番目の子(n+4){
    上マージン: 6px;
  }

  &:最初の子{
    左上の境界線の半径: 10px;
  }

  &:最後の子{
    右マージン: 0;
    右下の境界線の半径: 10px;
  }

  /**
  角丸*/

  //左下の丸い角: 最後の行の最初の &:nth-child(3n+1) {
    &:最後の子,
    &:n番目最後の子(2),
    &:n番目最後の子(3){
      左下の境界線の半径: 10px;
    }
  }

  // 4 つのレイアウトを処理する // 2 番目の余白を増やして 3 番目のレイアウトを次の行に押し出す &:nth-child(2):nth-last-child(3){
    右マージン: 220px;
  }
  //2番目の丸い角をリセットします &:nth-child(2):nth-last-child(3){
    右上の境界線の半径: 10px;
  }

  //3番目の余白と半径をリセットします
  &:n番目の子(3):最後のn番目の子(2){
    上マージン: 6px;
    右マージン: 6px;
    境界線の半径: 0 0 0 10px;
  }
  //4番目の丸い角をリセットします &:nth-child(4):last-child{
     境界線の半径: 0 0 10px 0;
  }
}

要約する

CSS を使用して動的な画像の 9 グリッド レイアウトを実装する方法について説明したこの記事はこれで終わりです。CSS 9 グリッド レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySql キャッシュ クエリの原理とキャッシュ監視およびインデックス監視の概要

>>:  IE環境では、divの高さはフォントの高さよりも大きくなければならないと規定されています。

推薦する

ReactでのsetStateの使用と同期と非同期の使用

React では、this.state を使用して状態を直接変更しても、コンポーネントは再レンダリン...

CentOS サーバーに FFmpeg をインストールするための完全な手順

序文サーバーシステム環境は、CentOS 6.5 (最終) です。 FFmpeg をサーバーに正常に...

互換性を維持しながら他のウェブページのデータを適用する iframe の使い方

以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...

(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...

K8Sの高度な機能を理解するための記事

目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...

Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...

WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します

この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するた...

IE8でラベルの背景画像が表示されない問題の解決方法

今日、ちょっとした問題に遭遇し、長い間苦労しました。そのことを皆さんにシェアしたいと思います。 a ...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...

LinuxシステムにおけるMySQLの一般的な操作コマンド

仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...

JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明

目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...