基于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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 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 数组二分法查找函数代码
2010/02/16 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
python求crc32值的方法
2014/10/05 Python
简单了解什么是神经网络
2017/12/23 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
党支部承诺书范文
2014/03/28 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2016国培研修心得体会
2016/01/08 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL