基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享


Posted in HTML / CSS onJune 11, 2014

CSS 多栏(Multi-column) : http://www.w3chtml.com/css3/properties/multi-column/

Properties属性 CSS Version版本 Inherit From Parent继承性 Description简介
columns CSS3 CSS3 columns 属性,是复合属性,设置或检索对象的列数和每列的宽度。
column-width CSS3 CSS3 column-width 属性,设置或检索对象每列的宽度
column-count CSS3 CSS3 column-count 属性,设置或检索对象的列数
column-gap CSS3 CSS3 column-gap 属性,设置或检索对象的列与列之间的间隙
column-rule CSS3 CSS3 column-rule 属性,是复合属性。设置或检索对象的列与列之间的边框。
column-rule-width CSS3 CSS3 column-rule-width 属性,设置或检索对象的列与列之间的边框厚度。
column-rule-style CSS3 CSS3 column-rule-style 属性,设置或检索对象的列与列之间的边框样式。
column-rule-color CSS3 CSS3 column-rule-color 属性,设置或检索对象的列与列之间的边框颜色。
column-span CSS3 CSS3 column-span 属性,设置或检索对象元素是否横跨所有列。
column-fill CSS3 CSS3 column-fill 属性,设置或检索对象所有列的高度是否统一。
column-break-before CSS3 CSS3 column-break-before 属性,设置或检索对象之前是否断行。
column-break-after CSS3 CSS3 column-break-after 属性,设置或检索对象之后是否断行。
column-break-inside CSS3 CSS3 column-break-inside 属性,设置或检索对象内部是否断行。

先来写一个简单的图片页面

复制代码
代码如下:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="../lib/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="">
</div>
</div>
<!-- 这里省略多个class为box的div-->
<div class="box">
<div class="pic">
<img src="">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var width = 300, height = 300;
$('.box img').each(function(){
// 随机图片的高宽,如果大小一样,就没必要用瀑布流了
width = Math.floor(Math.random() * 100) + 300;
height = Math.floor(Math.random() * 500) + 300;
$(this).attr('src', 'http://3water.com/'+ height +'/' + width);
});
</script>
</html>

假设,宽和高都是350,生成链接为http://3water.com/350/350,访问这个link就会得到一张350X350的可爱的小猫图片~~O(∩_∩)O~~

然后,添加相应的CSS即可

复制代码
代码如下:

* {
padding: 0;
margin: 0;
}
#main {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-moz-column-gap:20px;
-webkit-column-gap:20px;
column-gap:20px;
padding: 10px;
}
.box {
padding: 15px;
border: solid 2px #eeeeee;
border-radius: 4px;
margin-bottom: 15px;
cursor: pointer;
}
.box img {
width: 100%;
}

其中的 column-count 代表分成几列,column-gap 代表列和列之间的宽度,你可以根据自己的需要调整。我们还可以使用 column-width 来定义列宽。

这样就完成了,是不是很简单~~

最后效果图如下

基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享

HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 #HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 #HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 #HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 #HTML / CSS
css3 自定义字体font-face使用介绍
May 14 #HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 #HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 #HTML / CSS
You might like
如何在php中正确的使用json
2013/08/06 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
用jquery来定位
2007/02/20 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python类继承用法实例分析
2015/05/27 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python实现统计代码行数的小工具
2019/09/19 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
应届生自荐书
2014/06/23 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2014和解协议书范文
2014/09/15 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
捐资助学感谢信
2015/01/21 职场文书
三峡导游词
2015/01/31 职场文书
护理自荐信
2019/05/14 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android