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の高さはフォントの高さよりも大きくなければならないと規定されています。

推薦する

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

MySQL スロークエリを通じて MySQL のパフォーマンスを最適化する方法

アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...

React構成サブルーティングの実装

1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...

MySQLのunion allとunionの違いを簡単に理解する

Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...

Apache POIの基本的な使い方の詳しい説明

目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...

Linuxシステムにおける重要なサブディレクトリの問題について話す

/etc/fstabパーティション/ディスクを自動的にマウントし、マウントするパーティション/デバイ...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

XHTML 入門チュートリアル: テキストの書式設定と特殊文字

<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...

CSS フィルターを使用してマウスオーバー効果を記述する例

CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...

Linux における nohup と & の使い方と違いの詳細な説明

例:例として、Python コード loop_hello.py を使用します。このコードは、ループ回...

HTML でカスタム画像を使用してチェックボックスを表示する方法

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

Docker に Zookeeper を素早くインストールする方法の詳細なチュートリアル

Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...

権限の問題によりMySQLの設定ファイルmy.cnfを起動できない問題の解決方法

この記事では、権限の問題により MySQL 構成ファイル my.cnf を起動できない場合の関連する...