---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 46

## 瀑布流排版
運用 Bootstrap 格線系統搭配 [Masonry](https://bootstrap5.hexschool.com/docs/5.1/components/card/#masonry) 呈現第八週瀑布流排版設計

> 需額外載入 Masonry CDN
> ```
> <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
> ```

觀看 Bootstrap 提供的 [Demo](https://bootstrap5.hexschool.com/docs/5.1/examples/masonry/)，
在 .row 加上 `data-masonry='{"percentPosition": true }'`

此時就可以呈現出大致排版摟 ～

### 注意
如果要運用到圖片，需運用 [imagesLoaded](https://masonry.desandro.com/layout.html#imagesloaded)，搭配 [layout / .masonry()](https://masonry.desandro.com/methods.html#layout-masonry) 方法，
讓圖片都完整載入後，重新渲染畫面

觀看 [Codepen 範例](https://codepen.io/hexschool/pen/rNdbzbN)
> 載入 jQuery 及 imagesLoaded CDN

### 題目
試著呈現出第八週設計稿瀑布流排版吧！


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：https://codepen.io/hexschool/pen/LYdvezp?editors=1010
搭配 card 元件，格線系統斷點 col-md-*

其餘細節樣式（圖片白框、文字下線條、間距）同學可以再自行設定

-
補充：純粹使用 masonry 的版本
https://codepen.io/hexschool/pen/RwMdKyr
-->

回報區
---

| Discord | CodePen / 答案 |
|:------------:|:-------------------------------------------------------------------:|
| 布魯諾#7239 | [ CarrotPen ](https://codepen.io/bruno-yu/pen/PoRrddb?editors=1010) |
| WEI_RIO#9342 | [codePen](https://codepen.io/wei_wu/pen/QWmXVPQ?editors=1010) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/poLXOXZ) |
| Potatolee#7749 |[codePen](https://codepen.io/potatoleee/pen/KKojGoE)|
| 大衛#4869 |[codePen](https://codepen.io/exnsrpjc/pen/ExEBdoj)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/XWELxEJ)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/poLXxWG?editors=1010)|
| LHchien33#6232 |[codepen](https://codepen.io/lin_chien/pen/KKojGjO)|
| 雷雷#7844 |[codepen](https://codepen.io/lei-yi-jie/pen/ZExdVqj)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/KKojbpW?editors=1000)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/bGvPOGE)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/dymBaNX)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/vYRqbKy) |
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/WNzqPEg)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/WNzqWRR)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/GRxbbQz)|
|Clara#1275|[codepen](https://codepen.io/bsupixqu/pen/jOzjeaX)|
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/oNqrJdK) |
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/zYWVgQb)|
|949cat 𓃠#2154|[codepen](https://codepen.io/Ariel_Chen/pen/abYggyw)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/PoRMpPY?editors=1010)|
|peter#0|[Codepen](https://codepen.io/JIAN-RONG/pen/RwMXVeZ)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/PoRMjQV) |
| kevin8349 #6131 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/ExEqEQW?editors=1100)
| mei#8421 | [CodePen](https://codepen.io/Shila-Chen/pen/xxWvoER?editors=1010) |
| QOO#8446 | [CodePen](https://codepen.io/QOOQOOQ/pen/jOzgjNd) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/bGvXyer) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/qBYWdWG?editors=1010) |
| YI#0863 | [CodePen](https://codepen.io/YI0305/pen/OJZLJxa) |
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/oNdvpNq)|
|yo_yo#2678|[Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/ExLYLGR?editors=1010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/XWqJprO)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/XWqJeVY?editors=1010)|
|sohpiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/wvjMErp)
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/gOzWyBd)