Web前端培训：利用CSS3实现瀑布流效果

什么是类似电商网站的瀑布流布局效果：蘑菇街。

方案：

将几个小盒子放在一个大盒子里。小盒子的大小可能不一致，长度也各不相同，从而产生瀑布效应。

使用CSS3S只需要以下4个步骤即可实现：

1.准备视觉材料

2。编写相应的 HTML 结构

3。了解CSS属性多列（Multi-column）

4。应用多列 CSS 属性完成瀑布流布局

1。第一步——准备图画材料

目标：准备图画材料。每张图像的宽度和长度最好不要相同。另外，图像的宽度和高度不应该相同。不宜太大

总结：多准备一些图片素材，宽高不要超过1000像素

2。步骤2 - 编写相应的HTML结构

目标：在HTML页面中插入多个img图像标签，并使用src属性正确启动鼠标

摘要：使用img标签的src属性正确插入图像。需要更多 img 标签，因为我们需要更多图像

3。第三步 - 了解多列 CSS 属性

目标：了解多列 CSS 属性的基本用法，包括其功能和属性值​​

摘要：

l column-count 指定元素应划分的列数

l column-width 指定列宽度 - ga 列之间的空间

步骤 4 4 - 使用 CSS 多列属性完成瀑布流布局

目标：使用 CSS 创建多列 column 属性实现我们的图像瀑布流布局

总结：注意不要写成属性名称和值不正确。每个css属性值后面都跟一个英文分号

总结

使用CSS3瀑布布局可以轻松实现，但Internet Explorer 9及更早版本的IE不支持column-count属性。

让我们看看我们刚刚实施的步骤：

1。准备视觉材料

2。编写相应的HTML结构：使用多个图像并将它们放在同一个大框中

3。了解 CSS 多列属性

– 列数将指定框架中的内容划分为最多多列。它会根据浏览器的大小而改变，但不会超过我们指定的列数

–column-width决定了每列的最小列宽

–column-gap决定了每列的间隙

4。使用多列CSS属性完成瀑布流布局