基于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 14 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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
咖啡知识大全
2021/03/03 新手入门
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
python实现红包裂变算法
2016/02/16 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
《争吵》教学反思
2014/02/15 职场文书
人民教师求职自荐信
2014/03/12 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
安全目标责任书
2014/07/22 职场文书
阿甘正传观后感
2015/06/01 职场文书
创业计划书之农家乐
2019/10/09 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python