HTML5+CSS3+JavaScript Web前端开发案例教程课件：瀑布流布局.pptxVIP

瀑布流布局

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：瀑布流布局核心功能：瀑布流布局响应式布局

案例介绍PC端瀑布流布局效果

案例介绍移动端瀑布流布局效果

02技术准备

技术准备实现瀑布流布局的三种方法：使用columns属性实现；使用Flex弹性布局实现；使用JavaScript实现

技术准备方法1：使用columns属性实现第一种方法是使用CSS3提供的columns属性实现。columns属性是一个简写属性，columns实现瀑布流主要依赖两个属性，分别是column-count属性和column-gap属性。

技术准备CSS3中可设置的columns属性：属性名描述column-count设置的列数column-width列的宽度column-gap每列之间的间距，单位pxcolumn-rule规定列之间的宽度、样式和颜色

技术准备方法2：使用Flex弹性布局实现实现步骤：先将最外层元素设置为“display:flex”，即横向排列；然后通过设置“flex-flow:columnwrap”使其换行；设置“height:100vh”填充屏幕的高度，来容纳子元素；每一列的宽度可用calc函数来设置，即“width:calc(100%/3-20px)”；分成等宽的3列减掉左右两遍的margin距离。

技术准备方法3：使用JavaScript实现最后一种方法是使用JavaScript代码实现，瀑布流布局的特点是等宽不等高，为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置top值和left值定位每个元素。

03案例实现

案例实现文件结构：