検索
ホームページウェブフロントエンドCSSチュートリアルウォーターフォールフローレイアウトをCSSで実装する方法

ウォーターフォールフローレイアウトをCSSで実装する方法

青灯夜游
青灯夜游
May 13, 2021 pm 03:54 PM
cssフレックスレイアウト複数列のレイアウト滝の流れのレイアウト

CSS を使用してウォーターフォール フロー レイアウトを実装する方法: 1. 複数列の複数列レイアウトを使用します。 2. これを実現するには、フレックス レイアウトを使用します。外側のレイヤーを行レイアウトに設定し、次にコンテナを設定して列レイアウトに設定します。列を全体として扱い、列を分割し、幅を固定します。コラムです。

ウォーターフォールフローレイアウトをCSSで実装する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

ウォーターフォール フローのレイアウトはやはり魅力的だと感じています。最近、ウォーターフォール フローの実装を実践しているのを目にしました。ここに記録します。特に、フレックス レイアウトでのウォーターフォール フローの実装は素晴らしいと感じています。まだ少し混乱していますが、その原理を理解できるようになりました。

1.ウォーターフォール フローを実装するための複数列の複数列のレイアウト

最初に、いくつかのプロパティについて簡単に説明します。複数列に関連する

  • column-count は列数を設定します
  • column-gap は列間の間隔を設定します
  • column-width は各列の幅を設定しますcolumn

また、サブコンテナーでブレークインサイドの設定を組み合わせて、複数列レイアウト、ページ分割されたメディア、および複数リージョンのコンテキストでの予期せぬ中断を防ぎます

break-inside属性值
  auto  指定既不强制也不禁止元素内的页/列中断。
  avoid  指定避免元素内的分页符。
  avoid-page  指定避免元素内的分页符。
  avoid-column 指定避免元素内的列中断。
  avoid-region  指定避免元素内的区域中断。
  • インターセプトされた部分自分で入力できます
/* html文件 */
<!-- 使用multi-columns实现瀑布流 -->
<div id="root">
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghwm/default1.png"  data-src="../images/1.jpeg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghwm/default1.png"  data-src="../images/2.jpg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghwm/default1.png"  data-src="../images/3.jpg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghwm/default1.png"  data-src="../images/4.jpg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghwm/default1.png"  data-src="../images/5.jpeg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
</div>
/* css样式 */
body {
    background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
     margin: 0 auto;
     width: 1200px;
     column-count: 5;
     column-width: 240px;
     column-gap: 20px;
}
/* 每一列图片包含层 */
.item {
     margin-bottom: 10px;
     /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
     break-inside: avoid;
     background: #fff;
}
.item:hover {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
     width: 100%;
     vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
     padding: 5px 10px;
}
.avatar {
     vertical-align: middle;
     width: 30px;
     height: 30px;
     border-radius: 50%;
}
.username {
     margin-left: 5px;
     text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

ウォーターフォールフローレイアウトをCSSで実装する方法

ウォーターフォールフローレイアウトをCSSで実装する方法

##2.flex レイアウトでウォーターフォール フローを実装します

##外層の設定行レイアウトの場合はコンテナを設置し、列レイアウトとして列を全体として扱い、列を分割して列幅を固定することで実現します。 
  • /* html文件（只截取两列布局）*/
<div>
    <div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/1.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/2.jpg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/3.jpg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/4.jpg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/7.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/7.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/5.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
        <div>
            <img  class="itemImg lazy" src="/static/imghwm/default1.png" data-src="../images/6.jpeg" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
            <div>
                <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="../images/gift.png" alt="ウォーターフォールフローレイアウトをCSSで実装する方法" >
                <span>牵起你的左手护着你</span>
            </div>
        </div>
    </div>
</div>
    /* css文件 */
body{
   background: #e5e5e5;
}
#root{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 1200px;
}
.itemContainer{
    margin-right: 10px;
    flex-direction: column;
    width: 240px;
}
.item{
   margin-bottom: 10px;
   background: #fff;
}
.itemImg{
   width: 100%;
}
.userInfo {
   padding: 5px 10px;
}
.avatar {
   vertical-align: middle;
   width: 30px;
   height: 30px;
   border-radius: 50%;
}
.username {
   margin-left: 5px;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

ウォーターフォールフローレイアウトをCSSで実装する方法

    実践後、純粋な CSS によって実装されたウォーターフォール フローは列ごとにのみ配置できることがわかりました。 js を使用してウォーターフォール フローを実装します。これは、一般的なウォーターフォール フローにより一致します

    • (学習ビデオ共有:
css ビデオ チュートリアル

)

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
Draggin＆＃039;ドロップピン＆＃039;反応でDraggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェア高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションバックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですBest（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前ByDDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
1 か月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
1 か月前By尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7536
15
CakePHP チュートリアル
1379
52
Steamのアカウント名の形式は何ですか
82
11
Win11 Activation Key Permanent
55
19
NYTの接続はヒントと回答です
21
86
もっと見る