基于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不透明度实例讲解
Apr 26 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
JavaScript简介
2015/02/15 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Python 函数基础知识汇总
2018/03/09 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python实现超市扫码仪计费
2018/05/30 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
公司募捐倡议书
2014/05/14 职场文书
小学教师师德承诺书
2014/05/23 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2015毕业寄语大全
2015/02/26 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL