html 瀑布流样式,HTML+CSS07 瀑布流布局
预备知识:Column布局
CSS Columns(多列布局)是一种定义了多栏布局的模块,它能够表现出将内容在列之间怎么流动的以及间隙和分割线怎么使用。浏览器的兼容性还是不错的,生产环境建议-moz和-webkit前缀以及不加前缀三种形式共同使用
columns
CSS多列布局可以轻松的实现多列的瀑布流布局,它的两个关键属性是column-count和cloumn-width
column-count设置多列布局得的列数,取值:
auto,由其他CSS属性来决定列的数量,比如column-width
,用来描述元素内容被划分的列数,如果column-width也设置为非零值,此参数仅表示所允许的最大列数
column-width用来设定最佳列宽,取值:
auto,由其他CSS属性来决定列的数量,比如column-count
,用来描述最理想的列宽,实际列宽可能更宽(用来填充可用空间)也可能更窄(当可用空间比指明的列宽更窄),如果column-width也设置为非零值,此参数仅表示所允许的最大列数
因为这两个属性值没有重叠,可以使用columns来进行简写:
column-count: 5 → columns: 5
column-width: 200px → columns: 200px
↓
columns: 5 200px
复制代码
高度
一般来说,多列布局的高度是由浏览器自动确定的,但是也可以通过设置height或者max-height来限制列的高度。这样在生成新的一列之前都会仅允许增加到这个高度,剩下的内容会放置到下一列中。(这样会令我们的设置的column-count失效)
未设置高度:
设置最大高度后,列数超出了设置的column-count: 4:
列间隙
column-gap属性来设置列之间的间隔,取值:
normal,多列布局时默认值为1em,其他类型布局时默认值为0
,非负整数
,基于父元素宽度的百分比
列分割线
可以通过column-rule属性来为多列布局时各列之间添加分割线,它与border属性类似,也是一个缩写属性,它是由下面三个属性构成:
column-rule-width,指定分割线宽度,可以设定具体数值,也可以在thin、medium、thick之间取值
column-rule-style,指定分割线的样式,取值与border-style类似
column-rule-color,指定分割线的颜色
添加这个属性后column-rule: thick inset blue:
使用多列布局实现瀑布流
使用多列布局实现瀑布流就十分简单了:
DOM结构直接用一个多列布局的容器,内部防止排列的元素即可:
复制代码
关键是设置container的多列布局的相关属性:
.container {
width: 1000px;
column-count: 4;
column-gap: 1em;
column-width: 220px;
}
.img-container {
margin-bottom: 10px;;
break-inside: avoid;
}
复制代码
此外,需要在内部元素上添加一个break-inside属性,用来防止多列布局中内容以外中断,取值:
auto,不强制也不禁止元素内的页、列中断
avoid,避免元素内的分页符、列中断以及区域中断
aviod-page,避免元素内的分页符
aviod-column,避免元素内的列中断
aviod-region,避免元素内的区域中断
实现的效果:
多列布局来实现瀑布流布局的优点是灵活简单,并且不需要JavaScript参与,且DOM结构很简单,缺点除了需要考虑兼容性之外,我没发现缺点
使用Flex布局实现瀑布流
之前面试的时候被问到,如何实现瀑布流,我当时并不知道多列布局,自然而然就想到使用Flex实现。Flex完全可以实现,但是DOM结构会稍微复杂一些
首先需要让父容器成为Flex容器,再使用4个
复制代码
CSS设置并不复杂:
.container {
display: flex;
width: 1000px;
justify-content: space-around;
}
复制代码
实现的效果:
这种方法优点是兼容性好,缺点主要是DOM结构复杂一些,而且需要手动的将获取的元素插入到不同的列中,还需要综合考虑各列的高度,放着某一列高度超出其他列太多。
参考
html 瀑布流样式,HTML+CSS07 瀑布流布局相关推荐
- c语言switch瀑布流,两种常见飞瀑流(定位的瀑布流与浮动的瀑布流)
两种常见瀑布流(定位的瀑布流与浮动的瀑布流) 类似蘑菇街,美丽说网站的瀑布流 1.定位的瀑布流: window.onload = function(){ var aLi = document.getE ...
- jquery 瀑布流实例最流行瀑布流图片展示
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...
- html 瀑布流样式,纯css如何实现瀑布流?css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
- 5分钟教你搞定瀑布流样式
首先,我们来讲一下什么是瀑布流嘞?在某些个以图片为主的网站中,单一的布局那什么来吸引眼球,当然是尽量炫酷的布局了.瀑布流又称瀑布流式布局, 是现在流行的一种布局方式.知道了这些,那瀑布流布局实现的原理 ...
- html瀑布流原理,什么是瀑布流布局?
首先我们来看一下瀑布流布局是什么? 根据百度百科上面的定义我们可以知道瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载 ...
- android 水平方向瀑布流,Android RecyclerView(瀑布流)水平/垂直方向分割线
Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...
- ajax php瀑布流数据库,原生ajax瀑布流demo实例分享
本文主要为大家带来一篇原生ajax瀑布流demo分享(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 简单分为三个文档,有详细的注释:img ...
- swift瀑布流实现_CSS 实现瀑布流布局(display: flex)
作者 | chokcoco 本例使用 CSS flex 实现瀑布流布局. 关键点,横向 flex 布局嵌套多列纵向 flex 布局,使用了 vw 进行自适应缩放. 代码如下: HTML: // pug ...
- 横向瀑布流android,RecyclerView实现瀑布流布局
1,效果图 image.png 2,导包 implementation 'com.android.support:recyclerview-v7:27.1.1' 3,Xml文件 xmlns:andro ...
最新文章
- 为什么要用promise处理ajax,用promise.all解决ajax异步循环请求问题
- QEMU KVM Libvirt手册(7): 硬件虚拟化
- ITK:计算图像在特定方向上的导数
- SAP UI5 bindProperty的实现
- arduino 舵机接线图_求用5个电位器分别控制舵机的arduino的原码和连线图
- 02-线性结构2 一元多项式的乘法与加法运算 (20 分)
- JMeter工具使用初探
- 第9章 中断和动态时钟显示
- 【Python】Matplotlib绘制极坐标螺旋线图
- 用android做用户管理中心,Android 如何设计用户Session管理?
- vscode 本地调试和本地服务
- OpenShift 4 - 用自定义的TLS证书对访问OpenShift的用户认证身份
- 使用ServletContextListener关闭Redisson连接
- linux渗透win7的时候显示445,Win7如何简单的关闭445端口及445端口入侵详解
- 【Python】:SIFT算法的实现
- 小程序倒计时实现方法
- Linux 动、静态库原理深剖
- java山地车 故障,山地车故障的修理方法
- 计算机高级语言中数据的表现形式
- 用PS制作黑白画效果