当我们需要在网页中展示多张图片时，通常会采用瀑布流布局。瀑布流布局常常以“流式布局”、“瀑布流式布局”、“走马灯式布局”等名称出现。除了需要页面自适应外，还要在 UI 设计上考虑到美观大方。本文将基于 CSS Flexbox 来实现一个简单优雅的自适应瀑布流布局。
什么是 Flexbox
CSS Flexbox 是一种新的布局模式，可以使容器中的子元素能够轻松获得弹性盒模型的效果。它提供了一种更加灵活的方式来布置、对齐和分配空间。通过使用Flexbox布局，我们可以非常方便地创建出具有可伸缩性、响应式的布局效果，可以非常方便地适应不同大小的屏幕。
实现步骤
1. HTML 结构
首先，我们需要使用 HTML 结构来准备瀑布流所需的元素。常规做法是使用单独的 div 包裹每一个要显示的图片。示例代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ------------- ---- ------------------- ------ ---- ------------- ---- ------------------- ------ ---- ------------- ---- ------------------- ------ ---- --------- ----- --- ------展开代码
2. CSS 样式
接下来，我们将通过 CSS 样式来构建 Flexbox 布局。首先将某个容器（例如 div.waterfall）设置为 Flexbox 容器：
.waterfall { display: flex; flex-wrap: wrap; }
以上代码中，flex-wrap 属性十分重要，其用于指定当 Flexbox 容器尺寸小于子视图总和时，如何折行。通常我们将其设置为 wrap 以使子元素自动换行，以便在不同大小的屏幕中以更好的方式显示图片。
接下来，将每个要显示的图片 div.item 设置为 flex 容器：
.item { display: flex; align-items: center; justify-content: center; margin-right: 20px; margin-bottom: 20px; }
在以上代码中，align-items 和 justify-content 属性分别用于设置子视图在纵向和横向方向上对齐方式。上述样式中将所有的子视图都居中对齐。
最后，我们需要使用 CSS 来控制瀑布流每一项的宽度：
.item { flex-basis: calc(33.33% - 20px); }
以上代码将所有子视图的宽度设置为 33.33%，并且减去间距（20px），以确保多列网格排列效果。
3. JavaScript 事件
最后，我们需要确保要呈现的图片实际存在，考虑在页面加载后使用 JavaScript 事件来确保引用的图片可用：
-- -------------------- ---- ------- --- ---------- - -------------------------------- ------ --- ---------- - -- --- ---- - - -- - - ------------------ ---- - -------------------------------------- ---------- - ------------- -- ----------- -- ------------------ - --- --------- - ------------------------------------- -- ----------- - ----------------------- - -- - - --- -展开代码
以上代码中，我们使用了 JavaScript 事件来确保页面的图片已加载并准备好呈现。当所有的图片都加载完毕之后，我们将容器的透明度属性设置为 1。这样，即使出现网络问题，瀑布流的布局也能顺利呈现。
示例代码
HTML 代码：
-- -------------------- ---- ------- ---- ------------------ ---- ------------- ---- ------------------ ------------ --- ------ ---- ------------- ---- ------------------ ------------ --- ------ ---- ------------- ---- ------------------ ------------ --- ------ ---- --------- ----- --- ------展开代码
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - -------- ----- ------------ ------- ---------------- ------- ------------- ----- -------------- ----- ----------- ----------- - ------ -展开代码
JavaScript 代码：
-- -------------------- ---- ------- --- ---------- - -------------------------------- ------ --- ---------- - -- --- ---- - - -- - - ------------------ ---- - -------------------------------------- ---------- - ------------- -- ----------- -- ------------------ - --- --------- - ------------------------------------- -- ----------- - ----------------------- - -- - - --- -展开代码
指导意义
在学习本文之后，读者可以理解并熟练掌握 CSS Flexbox 的使用方法，并且可以通过简单、优雅的方式实现自适应瀑布流布局。当然，CSS Flexbox 还有许多其他的应用，例如水平居中、垂直居中等等。相信我们的前端开发人员可以针对不同的需求场景，快速掌握 CSS Flexbox，提高自己的业务能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d695ada941bf7134c5f7ae
