html 瀑布流样式,纯css如何实现瀑布流?css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流。
1.multi-column多列布局实现瀑布流
先简单的讲下multi-column相关的部分属性column-count设置列数
column-gap设置列与列之间的间距
column-width设置每列的宽度
还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断break-inside属性值
auto 指定既不强制也不禁止元素内的页/列中断。
avoid 指定避免元素内的分页符。
avoid-page 指定避免元素内的分页符。
avoid-column 指定避免元素内的列中断。
avoid-region 指定避免元素内的区域中断。截取了部分,可自己填充/* html文件 */
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
/* css样式 */
body {
background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
margin: 0 auto;
width: 1200px;
column-count: 5;
column-width: 240px;
column-gap: 20px;
}
/* 每一列图片包含层 */
.item {
margin-bottom: 10px;
/* 防止多列布局,分页媒体和多区域上下文中的意外中断 */
break-inside: avoid;
background: #fff;
}
.item:hover {
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
width: 100%;
vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
padding: 5px 10px;
}
.avatar {
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}
.username {
margin-left: 5px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
(瀑布流布局效果图1)
2.flex布局实现瀑布流将外层设置为row布局,然后再设置一个容器并设置为column布局,它是将列作为一个整体,然后在对列进行划分,在列里进行宽固定来实现的/* html文件(只截取两列布局)*/
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
牵起你的左手护着你
/* css文件 */
body{
background: #e5e5e5;
}
#root{
display: flex;
flex-direction: row;
margin: 0 auto;
width: 1200px;
}
.itemContainer{
margin-right: 10px;
flex-direction: column;
width: 240px;
}
.item{
margin-bottom: 10px;
background: #fff;
}
.itemImg{
width: 100%;
}
.userInfo {
padding: 5px 10px;
}
.avatar {
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}
.username {
margin-left: 5px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
(瀑布流布局效果图2)
实践后发现,纯css实现的瀑布流只能是一列一列的排布,所以还是得用js来实现瀑布流布局更符合我们常见的瀑布流
相关推荐:
html 瀑布流样式,纯css如何实现瀑布流?css实现瀑布流的两种方式相关推荐
- “高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
"高级"CSS样式一般应用于控制网页内容的外观.附加样式表分为内嵌样式表和外部样式表两种方式.
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
- java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
- js操作元素:改变元素内容有两种方式: interText 和 innerHTML的区别, 常用的元素的属性操作, 仿电脑系统时间问好 ,表单元素的属性操作 ,案例:仿京东显示隐藏密码 ,样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> < ...
- 两种方式创建纯代码的 iOS 项目,不使用 storyboard
两种方式 1. 去掉 storyboard,保留 SceneDelegate,改用纯代码开发 删除 .storyboard 文件 删除 Deployment Info -> Main Inter ...
- 如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软 会计 绘画 Adobe 微软 会计 绘画 一. ...
- 两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
问题描述 我们知道浏览器页面上的文字正常情况下我们是可以双击选中.或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的.但是有的时候,这种效果我们并不想要的,比如用户点快了的时候, ...
- html仿qq分组,iOS 实现类似QQ分组样式的两种方式
思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "i ...
最新文章
- linux存储--页面置换算法(十一)
- 人生必学的一课:成功的人就是会“勉强”别人的人
- Jquery在线引用地址:
- java batik_Batik详解.pdf
- jquery 设置style:display 其实很方便的哦
- 泛型的基本用法和代码演示
- 软件测试之缺陷报告的BUG状态
- python实现表格_Python 自由定制表格的实现示例
- 一个杯子帮你理解软件测试
- 【渝粤教育】21秋期末考试社会学概论10082k1
- javascript 动态选中option
- win7计算机里没有网络图标,Win7网络图标不见了?找回网络图标的方法
- 使用opencv转化图片格式
- 查看计算机配置在哪里,怎么看电脑配置 查看电脑配置的方法有哪些
- 爬虫——爬取京东评价
- 解决springboot无法访问此网站,localhost 拒绝了我们的连接请求的问题。
- 1697_python编程_assertions and exceptions
- Apple developer新的的注册方式
- GBase 8a 节点替换
- android+点九图片+教程,史上最详细的android的点9(.9)图片制作教程,菜鸟看完也保证可以学会...