検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法

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

青灯夜游
青灯夜游転載
2021-09-26 10:58:144970ブラウズ

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 回減算します。 <pre class="brush:html;toolbar:false;">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;style&gt; .box { display: flex; flex-flow: column wrap; height: 100vh; } .item { margin: 10px; width: calc(100%/3 - 20px); } .item img{ width: 100%; height:100%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;box&quot;&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/1.jpg&quot; alt=&quot;1&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/2.jpg&quot; alt=&quot;2&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/3.jpg&quot; alt=&quot;3&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/1.jpg&quot; alt=&quot;1&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/2.jpg&quot; alt=&quot;2&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/3.jpg&quot; alt=&quot;3&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/1.jpg&quot; alt=&quot;1&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/2.jpg&quot; alt=&quot;2&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/3.jpg&quot; alt=&quot;3&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/1.jpg&quot; alt=&quot;1&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/2.jpg&quot; alt=&quot;2&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/3.jpg&quot; alt=&quot;3&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;item&quot;&gt; &lt;img src=&quot;./imgs/1.jpg&quot; alt=&quot;1&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre>表示効果は次のとおりです

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

ウォーターフォール フローの実装コード: https://gitee.com/yunxii/css-demo/tree/master/waterfall

元のアドレス: https://juejin.cn/post/7011333433318178846

著者: tangxd3

プログラミング関連の知識については、

プログラミング ビデオ
をご覧ください。 ！

以上がCSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css count display margin column flex https gitee
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：スタイル コードをより簡潔にするために、CSS の :is() と :where() について詳しく学習してください。次の記事：スタイル コードをより簡潔にするために、CSS の :is() と :where() について詳しく学習してください。

関連記事

続きを見る