CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法-CSSチュートリアル-php.cn

CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法

青灯夜游

リリース： 2022-11-15 16:18:03

転載

4922 人が閲覧しました

CSS を使用してウォーターフォールフローを実装するにはどうすればよいですか?次の記事では、CSSを使用してウォーターフォールフローを実装する2つの方法を紹介します。

CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法

ウォーターフォールフロー (ウォーターフォールフローレイアウトとも呼ばれる) は、Web サイトのページレイアウト方法としてよく使われています。携帯電話で複数の写真を表示する場合によく使用されます。つまり、同じ幅の要素が複数行配置され、同じ幅と不等な高さで後続の要素が順番に追加され、幅が要件に達するまで画像の元の比率に従って拡大縮小されます。ルールに従って指定された位置に配置されます。

それでは、ウォーターフォールフローレイアウトの実装方法にはどのようなものがあるのでしょうか?

`column` ウォーターフォールフローを実装するための複数行のレイアウト

column ウォーターフォールフローの実装は、主に 2 つの要素に依存します。属性。

column-count 属性は、画面を何列に分割するかを制御します。

column-gap 属性は列間の距離を制御します。

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局-column</title>
  <style>
    .box {
          margin: 10px;
          column-count: 3;
          column-gap: 10px;
      }
      .item {
          margin-bottom: 10px;
      }
      .item img{
          width: 100%;
          height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
  </div>
</body>
</html>

ログイン後にコピー

CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法

#flex ウォーターフォールフローを実現する柔軟なレイアウト

#flex

ウォーターフォールフローを実装するには、最も外側の要素を

display: flex に設定し、エラスティックレイアウト flex-flow:column Wrap

を使用して配置する必要があります。垂直方向と行の折り返し

Setheight: 100vh

画面全体に表示される高さ、または子要素を収容するために

px 単位の高さに設定できます。 各列の幅は、calc

関数、つまり

width: calc(100%/3 - 20px) で設定できます。それを等しい幅の 3 列に分割し、左右で margin の距離を 2 回減算します。

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
        display: flex;  
        flex-flow: column wrap;
        height: 100vh;
      }
      .item {
        margin: 10px;
        width: calc(100%/3 - 20px);
      }
      .item img{
        width: 100%;
        height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
  </div>
</body>
</html>

ログイン後にコピー

表示効果は次のとおりです



ケース コード
ウォーターフォール フローの実装コード: https://gitee.com/yunxii/css-demo/tree/master/waterfall
元のアドレス: https://juejin.cn/post/7011333433318178846
著者: tangxd3
プログラミング関連の知識については、
プログラミング ビデオ
をご覧ください。 ！ 
以上がCSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。