纯CSS3制作瀑布流

前言：瀑布流式布局相信我们见过很多，但是都知道用JS方法去制作，今天我们就可以用纯CSS的方法也制作瀑布流布局。

效果图：

步骤一：

写好结构；div是装这些列表，一个li就代表一个列表，当然li里不单止可以放img，文字类的也是可以的。

步骤二：

清除默认样式；给box盒子设置宽高，然后盒子上下间隔200px（为了好看），左右居中

步骤三：

清除页面的默认样式，因为我们用的是li布局，所以把li的默认样式去掉是很有必要的。

步骤四：

给最外层盒子设置样式，不用设置宽高，给左右外边距是为了能居中美观。可能有同学会觉得，为什么不能给左右外边距auto呢？要注意的是，左右外边距auto的前提条件是这盒子要有宽，我们这盒子是没有宽的。

column-width是CSS3新属性，规定了每列的宽度为250px，当然这个数字可以按照实际情况修改。这是做瀑布流的主要属性。

步骤五：

给每个li设置宽度为250px，这里注意250px是要跟父级的那个column-width的值相同。margin是为了美化。不用加上浮动，可能有些同学以为并排显示要加上浮动，但是父级改变成了列表布局，自己li就不用加浮动了。

步骤六：

因为每个li的宽度为250px，我们这里是插入图img，所以宽度也要固定成250px，不然图片就显示不完整。注意：高不用给，如果你给了高的话，图片比例不对容易变形，一般插入图要改变大小的话只需要给宽或高其中一项即可。

纯CSS3制作瀑布流.zip (1.06 MB, 下载次数: 59)

2017-2-15 15:06 上传

点击文件名下载附件

纯CSS3制作瀑布流

前言：瀑布流式布局相信我们见过很多，但是都知道用JS方法去制作，今天我们就可以用纯CSS的方法也制作瀑布流布局。

效果图：

步骤一：

写好结构；div是装这些列表，一个li就代表一个列表，当然li里不单止可以放img，文字类的也是可以的。

步骤二：

清除默认样式；给box盒子设置宽高，然后盒子上下间隔200px（为了好看），左右居中

步骤三：

清除页面的默认样式，因为我们用的是li布局，所以把li的默认样式去掉是很有必要的。

步骤四：

给最外层盒子设置样式，不用设置宽高，给左右外边距是为了能居中美观。可能有同学会觉得，为什么不能给左右外边距auto呢？要注意的是，左右外边距auto的前提条件是这盒子要有宽，我们这盒子是没有宽的。

column-width是CSS3新属性，规定了每列的宽度为250px，当然这个数字可以按照实际情况修改。这是做瀑布流的主要属性。

步骤五：

给每个li设置宽度为250px，这里注意250px是要跟父级的那个column-width的值相同。margin是为了美化。不用加上浮动，可能有些同学以为并排显示要加上浮动，但是父级改变成了列表布局，自己li就不用加浮动了。

步骤六：

因为每个li的宽度为250px，我们这里是插入图img，所以宽度也要固定成250px，不然图片就显示不完整。注意：高不用给，如果你给了高的话，图片比例不对容易变形，一般插入图要改变大小的话只需要给宽或高其中一项即可。

纯CSS3制作瀑布流.zip (1.06 MB, 下载次数: 59)

2017-2-15 15:06 上传

点击文件名下载附件