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,所以一 ...
随机推荐
- 统一建模语言UML
目录 1. UML定义 2. UML结构 2.1 视图(View) 2.2 图(Diagram) 2.3 模型元素(Model element) 2.4 通用机制(General mechanism) ...
- 三节课MINI计划第一周
第一部分 产品经理做什么以及需要的能力 (一)用户分析 用户群——行为分析——需求痛点——产品卖点——更多用户群 (二)功能分析 产品调研——产品结构——功能点——关键流程——下一轮产品调研 (三 ...
- C#6.0和C#7.0
C#最新功能(6.0.7.0) 一直用C#开发程序,.NET的功能越来越多,变化也挺大的,从最初的封闭,到现在的开源,功能不断的增加,一直在进步.作为C#的强烈支持者,C#的变化,我不能不关注,这篇文 ...
- SpringBoot开发
创建一个Spring Boot,可以直接使用构建工具(Maven或Gradle)创建,也可以使用spring.io网站创建,一般会选择使用spring.io创建 使用IDEA创建一个Spring Bo ...
- spring 中常用的两种事务配置方式
引用:http://blog.csdn.net/qh_java/article/details/51811533 引用:http://www.cnblogs.com/rushoooooo/archiv ...
- selenium + python 环境配置 (一)
超级无敌菜鸟 终于有空学习一下python 和 selenium 啦 第一步: 环境配置 (Windows版) 1. 下载安装python 根据你的电脑,下载一个python吧 这儿装的是pyt ...
- Information Cartography
作者:Dafna Shahaf 会议:ACM 2015. 研究大背景:自动化地从很大数据集中提取结构化的知识变得越来越难.在本篇文章中,我们将探索我们在文献中(25,26,27)中创立的方法来自 ...
- python+unittest框架第三天unittest之分离测试固件和公共代码,跳过案例的执行
我们在时间工作中,会将整个项目的代码分别放置多个模块中去编写.方便后期项目维护,比如,我们的web项目可能有多个IP地址,每个IP地址代表不同的测试环境.测试环境与Bat环境或者验收环境等.这就需要我 ...
- Spring boot+Websocket实例1
简单的demo https://github.com/callicoder/spring-boot-websocket-chat-demo
- ${__setProperty(row,rowNum)};不能在import XXX后面使用;
如下 ${__javaScript只能用一次调用 excel.CWResultFile.CWOutputFile.wOutputFile("/Users/iot/1.xls", & ...