uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード

// コンポーネント/ウォーターフォール.vue
<テンプレート>
    <view class="ウォーターフォール">
        <非表示を表示>
            // JS ネイティブ実装を使用する場合、for ループを直接使用して挿入し、列の高さを取得できます // ここでは、メソッドは画像をロードすることによって呼び出されます。デフォルトのパラメータは画像情報を運び、画像の高さを取得できます <block v-for(item in imgList" :key="item.id">
                <画像:src="item.url" @load="loadImg" ></iamge>
            </ブロック>
        </ビュー>
        <view class="list" v-for="(list, key) ウォーターフォール内" :key="key">
            <navigator url="https://www.baidu.com" v-for="list.list 内の項目" :key="item.id">
                <画像:src="item.url" mode="widthFix"></画像>
                <view class="shop-info">
                    /*タイトルおよびその他の情報は省略*/
                </ビュー>
            </ナビゲーター>
        </ビュー>
    </ビュー>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        // 別個のコンポーネントとして抽出されるため、データは親コンポーネントから取得されるか、現在のコンポーネントが API を要求します
        プロパティ: { imgList: 配列 },
        データ（）{
            戻る {
                lists: [], // 操作を簡単にするためにimgListをバックアップするために使用される配列waterfall: [
                    // 現在の列の高さを記録するために使用されます。プルアップして新しいデータを取得するために使用できるように、メソッドには保存されません。 // デフォルトの携帯電話の表示は 2 列に固定できるためです。 // コンピューター上でアダプティブまたはマルチカラムである場合は、複数の列を動的に挿入できます。
                        高さ: 0, 
                        リスト: []
                    },{
                        高さ: 0, 
                        リスト: []
                    }
                ]
            }
        },
        作成された(){
            this.lists = this.imgList; // Vue はデータを作成し、すぐにバックアップします},
        時計（）{
            // データ ソースをリッスンします。新しい値が渡された場合は、リスト配列でバックアップします。imgList(data){ data.length && this.lists.push(...data); }
        },
        メソッド: {
            読み込み画像(ev){
                Root = this.waterfall; とします。
                高さを e.detail.height とします。
                //現在の高さに基づいて新しいデータが誰に渡されるかを判断し、列の高さを更新します。最初に左側を挿入します if (Root[0].height <= Root[1].height){
                    // ヒート優先度の問題を考慮して、shift() メソッドを使用してヘッダー データをプッシュします。
                    ルート[0].list.push(this.lists.shift())
                    ルート[0].height += 高さ;
                } それ以外 {
                    ルート[1].list.push(this.lists.shift())
                    ルート[1].height += height;
                }
            }
        }
    }
</スクリプト>