基于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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
如何通过python实现全排列
2020/02/11 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
化学相关工作求职信
2013/10/02 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL