こちらのissuesを参考にして作りました。素晴らしい内容でした。これを見つけるのが結構大変でした。いいサンプルがなかったので大変助かりました。こちらでサンプルを見ることができます。今回はこちらをvue.jsで実装したいと思います。遅延読み込み画像を多く使用するアプリの場合、UXを向上させるためにlazy-loadを用いて遅延読み込みを行う場合が多いと思うので今回は画像遅延読み込みライブラリのvue-lazyloadを使用します。こちらを参考にさせていただきました。layout本体を実装していきます。コンポーネントを分けています。}}</script>画像の読み込みを待つため非同期処理を行なっています。画像の高さと幅を取得して伸び率を指定するflex-growを調整しています。}}アイテム間の幅は、images-brick-itemのmarginで調整できます。これだけでできてしまうのでとても簡単です。class="brick-item-image">のv-lazyで行なっています。まとめレスポンシブですが、画面幅によっては最後の画像が幅いっぱいに広がらない場合があります。そこらへんはcssでうまく調整してみてください。FacebookTwitterPocketはてブGoogle+LINE関連記事Vuetifyでのバリデーションまとめvue.jsでタグのAutocompleteを実装プロフィールこのサイトを運営しているイノカワです。静岡でフリーランスをやっています。コードを書くのが大好き。いろんな技術に触れて日々気づいたこと・感じたこと・詰まったこと・生活のことを書いています。技術においては雑食です。