基于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 相关文章推荐
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python绘制热力图heatmap
2020/03/23 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
消防安全宣传口号
2014/06/10 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
推普标语口号大全
2015/12/26 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL