基于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 Columns分列式布局方法简介
May 03 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
Zend公司全球首推PHP认证
2006/10/09 PHP
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python入门篇之字符串
2014/10/17 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
学生党员的自我评价范文
2014/03/01 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
Python绘制分类图的方法
2021/04/20 Python
十个Python自动化常用操作,即拿即用
2021/05/10 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python