CSS3实现瀑布流布局
讲干货,不啰嗦,瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。
具体步骤:
1.设置外部容器多列列数(column-count)和列间距(column-gap)
2.设置内容条目的break-inside属性为avoid,使条目总体不被打断。
HTML结构:
<div class="container"> //最外层容器
<div class="item">//条目
<div class="item__content">//条目内容
<img src=''>
</div>
</div>
<div class="item">
<div class="item__content">
<img src=''>
</div>
</div>
<!-- more items -->
.........
</div>
css样式:
.container {
column-count: 4; //多列的列数
column-gap: 0;//列间距
} .item{
break-inside: avoid;//避免在主体框中插入任何中断(页面,列或区域)。
}
以上为最核心代码,需要根据具体业务做进一步完善,如添加浏览器前缀,设置元素宽高及位置等等。
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实现瀑布流布局
以前使用瀑布流都要用js,现在有了css3,可以轻松实现了. 掌握点: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定 ...
- 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,所以一 ...
随机推荐
- ARM 之一 ELF文件、镜像(Image)文件、可执行文件、对象文件 详解
[转]https://blog.csdn.net/ZCShouCSDN/article/details/100048461 ELF 文件规范 ELF(Executable and Linking ...
- IDEA新建本地项目关联远程git仓库
现在远程git仓库创建一个repository,然后本地创建项目,最后进行关联.三板斧,打完收工. 第一步.第二步地球人都知道,略过不表,第三步比较关键,举个例子: 0.创建本地Git仓库:VCS - ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍
1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...
- CRISP-DM
CRISP-DM (cross-industry standard process for data mining), 即为"跨行业数据挖掘标准流程". 此KDD过程模型于1999 ...
- python面向对象之初步认识
面向对象 类,用来描述一类事物的相同的特征或者属性.比如说,狗,狗属于一种统称,狗还分有不同的种类,比如,牧羊犬,蝴蝶犬,京巴等等,他们都有相同的特征,一个头,两个耳朵,四条腿,会跑,会吃东西,会汪汪 ...
- Egret入门学习日记 --- 第一篇 (引擎的选择)
第一篇 (引擎的选择) 我人比较笨,得慢慢学,我就一点一点来好了. 首先,我个人喜欢游戏.网页开发相对游戏开发来说,网页开发实在太枯燥了,没劲.所以打算转游戏开发了. 游戏开发要选择游戏引擎,我去看了 ...
- 机器学习算法K-NN的一个使用实例:预测一个人是否患有糖尿病 (KNN-Predict whether a person will have diabetes or not )
学习中...不断更新. 在糖尿病人的数据库中有几列是不能为0的 比如葡萄糖 胰岛素 身体指数和皮肤厚度.所以在数据预处理阶段需要对这些列的数据进行替换. remeber we did 12 minus ...
- python 在工程中处理相对路径的思考
首先就是 工程中的目录非常多.不能使用绝对路径. 只能使用相对路径. 我工程的目录: root_dir = os.path.dirname(os.path.abspath('.')) ## 获取相对目 ...
- [转帖]支撑双11每秒17.5万单事务 阿里巴巴对JVM都做了些什么?
支撑双11每秒17.5万单事务 阿里巴巴对JVM都做了些什么? https://mp.weixin.qq.com/s?__biz=MzA3OTg5NjcyMg==&mid=2661671930 ...
- Bean的三种实例化方式
在面向对象程序中,如要使用某个对象,就需要先实例化这个对象.同样的,在Spring中,要想使用容器中的Bean,也需要实例化Bean.实例化Bean有三种方式,分别是:构造器实例化.静态工厂实例化.实 ...