ウォーターフォールフローレイアウトを実装する3つの方法

序文

今日、Xianyuを閲覧していたとき、各行の高さが同じではないことに気付きました。調べてみると、これはウォーターフォールフローレイアウトだということが分かりました。とても興味深いと感じたので、勉強してみることにし、インターネットでいくつかの解決策を見つけました。ウォーターフォールフローを実装する方法は3つほどあります。

1. JSはウォーターフォールフローを実現する

思考分析

滝の流れのレイアウトは、幅が等しく高さが不等なのが特徴です。
最後の行の隙間を最小限に抑えるには、2 行目から始めて、最初の行の最も短い画像の下に画像を配置する必要があります。
親要素は相対配置に設定され、画像を含む要素は絶対配置に設定されます。次に、上と左の値を設定して各要素を配置します。

コードの実装

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        。箱 {
            幅: 100%;
            位置:相対;
        }
        。アイテム {
            位置: 絶対;
        }
        .item画像{
            幅: 100%;
            高さ:100%;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</本文>
<script src="jquery.min.js"></script>
<スクリプト>
    関数 waterFall() {
        // 1 画像の幅を決定します - スクロールバーの幅 var pageWidth = getClient().width-8;
        var columns = 3; //3 列 var itemWidth = parseInt(pageWidth/columns); //アイテムの幅を取得します $(".item").width(itemWidth); //アイテムの幅に設定します var arr = [];
        $(".box .item").each(function(i){
            var height = $(this).find("img").height();
            if (i < 列) {
                // 2 最初の行は$(this).css({
                    上:0,
                    左:(itemWidth) * i+20*i、
                });
                //行の高さを配列にプッシュします arr.push(height);
            } それ以外 {
                // その他の行 // 3 配列内の最小の高さとそのインデックスを検索します var minHeight = arr[0];
                var インデックス = 0;
                (var j = 0; j < arr.length; j++) の場合 {
                    （最小高さ＞arr[j]）の場合{
                        最小高さ = arr[j];
                        インデックス = j;
                    }
                }
                // 4 次の行の最初のボックスの位置を設定します // 上の値は最小の列の高さです $(this).css({
                    top:arr[index]+30, //距離を30に設定します left:$(".box .item").eq(index).css("left")
                });

                // 5 最小列の高さを変更する // 最小列の高さ = 現在の高さ + 接合された列の高さ arr[index] = arr[index] + height+30; // 距離を 30 に設定する}
        });
    }
    //clientWidthは互換性関数getClient() {
        戻る {
            幅: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth、
            高さ: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    // ページサイズが変更されるとリアルタイムでトリガーされます window.onresize = function() {
        // ウォーターフォールのフローを再定義しますwaterFall();
    };
    // 初期化 window.onload = function(){
        //滝の流れを実現するwaterFall();
    }
</スクリプト>
</html>

効果は以下のとおりです

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

思考分析:

列は、ウォーターフォールフローを実装するために主に 2 つのプロパティに依存します。
1 つは、列をいくつに分割するかを表す列数属性です。
1 つは列間の距離を設定する column-gap プロパティです。

コード実装:

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        。箱 {
            マージン: 10px;
            列数: 3;
            列間隔: 10px;
        }
        。アイテム {
            下マージン: 10px;
        }
        .item画像{
            幅: 100%;
            高さ:100%;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</本文>

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

3. ウォーターフォールフローを実現するフレックスレイアウト

思考分析:

flex を使用してウォーターフォールフローを実現するには、最も外側の要素を display: flex、つまり水平配置に設定する必要があります。次に、列を折り返すために flex-flow: column wrap を設定します。子要素を収容するために画面の高さを埋めるために、height: 100vh を設定します。各列の幅は、calc 関数を使用して設定できます。例: width: calc(100%/3 - 20px)。左右の余白を除いて、均等幅の 3 つの列に分割します。

コード実装:

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        。箱 {
          ディスプレイ: フレックス;  
          flex-flow:列折り返し;
          高さ：100vh;
        }
        。アイテム {
            マージン: 10px;
            幅: calc(100%/3 - 20px);
        }
        .item画像{
            幅: 100%;
            高さ:100%;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</本文>

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