用CSS3实现瀑布流布局
以前使用瀑布流都要用js,现在有了css3,可以轻松实现了。
掌握点:
1、column-count 把div中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; 避免元素内部断行并产生新列
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3瀑布流</title>
<style>
/*大层*/
.container{width:80%;margin: 0 auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/*一个内容层*/
.item{
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
}
.item img{
width: 100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="waterfall">
<div class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg">
<p>1 convallis timestamp</p>
</div> <div class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg">
<p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
</div> <div class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg">
<p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.</p>
</div> <div class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg">
<p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. </p>
</div> <div class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg">
<p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
</div>
</div>
</body>
</html>
用CSS3实现瀑布流布局的更多相关文章
- 纯css3打造瀑布流布局
纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...
- 使用css3实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局,但这种方法有个缺点,就是对于商城类型的网站,价格筛选时,并不能达到理想效果. 1.column-count 把div中的文本分为多少列 2.column-width ...
- CSS3实现瀑布流布局
讲干货,不啰嗦,瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果. 具体步骤: 1.设置外部容器多列列数(column ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- CSS3 -- column 实现瀑布流布局
本例使用 CSS column 实现瀑布流布局 关键点,column-count: 元素内容将被划分的最佳列数 关键点,break-inside: 避免在元素内部插入分页符 html div.g-co ...
- 也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
- 微信小程序 瀑布流布局
今天做小程序的时候,碰到一个比较常见的需求,就是要瀑布流布局,两列,交错分布,大概如下图 最终要实现的结果就是如左图所示. 不过在微信小程序里面,不能通过JavaScript来直接操作dome,所以一 ...
随机推荐
- Quartz资源收藏
项目中使用Quartz集群分享 : http://hot66hot.iteye.com/blog/1726143 发布 Quartz Job Scheduling Framework 中文 PDF 版 ...
- hibernate中HQL多对多的查询
现有三张表 TLXPURCHASE.采购事项审批表,TLXPURCHASEACTIVITY.采购招标活动对应表,TLXACTIVITY.招标活动表,采购事项审批表和采购活动表是多对多关系.java中定 ...
- Mybatis实现数据的增删改查(CRUD)
什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBat ...
- windows 10 设置
精简应用 邮件和日历: Get-AppxPackage *communi* | Remove-AppxPackage 新闻: Get-AppxPackage *bing* | Remove-AppxP ...
- 关于APP接口设计(转)
最近一段时间一直在做APP接口,总结一下APP接口开发过程中的注意事项: 1.效率:接口访问速度 APP有别于WEB服务,对服务器端要求是比较严格的,在移动端有限的带宽条件下,要求接口响应速度要快,所 ...
- pyqt5 开发环境
pyqt5 pycharm mac下开发环境 brew install python3 安装python3 brew install pyqt5 配置pycharm http://blog.csdn. ...
- nfs的挂载方法
对于很多嵌入式驱动开发者,要进行很多次调试,如果nfs搭建不起来,那么对开发是很不方便的.经过三天,我终于把自己编的内核下载到开发板,并实现了nfs文件系统的挂载.今天把过程写下来. 思路 一 编译a ...
- 浏览器-07 chromium 渲染1
Chromium 软件渲染 软件渲染就是利用CPU,根据一定的算法来计算生成网页的内容; Chromium都是用软件渲染的技术来完成页面的绘制工作(除非强行打开硬件加速绘制); 软件渲染基础和架构 R ...
- BDYY【面试题】
1.引用与多态的关系:引用是除指针外另一个可以产生多态效果的手段.这意味着,一个基类的引用可以指向它的派生类实例. 2.C++可以多继承 3.引用与指针区别:
- Ado.Net事物处理
protected void Button2_Click(object sender, EventArgs e) { SqlConnection con = new SqlCo ...