瀑布流布局

课程目标

通过创建一个瀑布流布局的图片库，更加熟练都应用几天学习的 CSS 知识进行布局

阅读学习

• 瀑布流布局 (opens new window)
• 使用 CSS Grid 实现瀑布流布局 (opens new window)
• Flexbox 布局实战 (opens new window)
• Approaches for a CSS Masonry Layout (opens new window)
• 瀑布流布局的 5 种实现方式 (opens new window)
• 深度解析瀑布流布局 (opens new window)
• Three Super Easy Ways to Pull Off a Masonry Layout (opens new window)
• W3C Flexbox (opens new window)
• W3C Grid (opens new window)
• 多列布局 (opens new window)
• CSS3 瀑布流布局视频教程-慕课网 (opens new window)

编码

分别应用弹性盒子布局，多列布局，grid 布局实现一个瀑布流布局，创建一个图片库

自测问题

• 瀑布流布局是什么？
• 思考瀑布流布局不同实现方式，以及它们的难点和区别

提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

• 这里有很多方法 (opens new window)

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

• 日期，今天的学习总用时，今天学习的目标是什么，是否达成
• 哪些东西今天了解得比较透彻，说说自己的理解
• 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
• 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

预告

到这里 CSS 的布局知识基本学习完了，下面一节我们将进行一个布局综合练习作业