CSS3 -- column 实现瀑布流布局
本例使用 CSS column 实现瀑布流布局
关键点,column-count: 元素内容将被划分的最佳列数
关键点,break-inside: 避免在元素内部插入分页符
html
div.g-container
-for(var j = 0; j<32; j++)
div.g-item
scss
$count: 32;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
column-count: 4;
column-gap: .5vw;
padding-top: .5vw;
}
.g-item {
position: relative;
width: 24vw;
margin-bottom: 1vw;
break-inside: avoid;
}
@for $i from 1 to $count+1 {
.g-item:nth-child(#{$i}) {
height: #{randomNum(300, 50)}px;
background: randomColor();
&::after {
content: "#{$i}";
position: absolute;
color: #fff;
font-size: 2vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
感谢公总号:web前端开发
CSS3 -- column 实现瀑布流布局的更多相关文章
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- 使用css3实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局,但这种方法有个缺点,就是对于商城类型的网站,价格筛选时,并不能达到理想效果. 1.column-count 把div中的文本分为多少列 2.column-width ...
- 纯css3打造瀑布流布局
纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...
- CSS3实现瀑布流布局
讲干货,不啰嗦,瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果. 具体步骤: 1.设置外部容器多列列数(column ...
- 也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
- 微信小程序 瀑布流布局
今天做小程序的时候,碰到一个比较常见的需求,就是要瀑布流布局,两列,交错分布,大概如下图 最终要实现的结果就是如左图所示. 不过在微信小程序里面,不能通过JavaScript来直接操作dome,所以一 ...
- 网页瀑布流布局插件Masonry
CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...
- flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬_┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...
- JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
随机推荐
- Golang中string和[]byte的对比
golang string和[]byte的对比 为啥string和[]byte类型转换需要一定的代价? 为啥内置函数copy会有一种特殊情况copy(dst []byte, src string) i ...
- 阿里云ECS服务器 java JDK安装和配置 mysql安装和配置
最近配置了一下阿里云ecs服务的服务器环境,主要对java jdk环境的安装和配置,以及数据库mysql的安装和配置,趁着热乎,记录一下! 服务器用的系统是ubuntu_16_04_64的,版本16. ...
- IO-file-03 文件的长度
package com.bwie.io; import java.io.File; public class FileDemo4 { /**文件字节数 * length():字节数 文件夹 0 * * ...
- Django生成数据表时报错
Django生成数据表时报错 WARNINGS: ?: (mysql.W002) MySQL Strict Mode is not set for database connection 'defau ...
- MYSQL SHOW 用法
1.SHOW CHARACTER SET 显示所有可用的字符集 mysql> SHOW CHARACTER SET LIKE 'utf8'; +---------+--------------- ...
- Mysql解析json字符串/数组
1 Mysql解析json字符串 解决方法:JSON_EXTRACT(原字段,'$.json字段名') 执行SQL: SELECT JSON_EXTRACT( t.result,'$.row'), ...
- fiddler模拟发送请求和响应
iddler模拟发送请求和响应 一.fiddler模拟发送请求 1.fiddler模拟发送get请求 1)例如:访问博客园https://www.cnblogs.com/,并且登录输入密码账号登录,再 ...
- (七)RequestMapping 和 Controller方法
文章目录 @[toc] RequestMapping功能 controller 方法返回值 RequestMapping功能 url映射 在定义 Controller 的,我们在方法上面,使用 @Re ...
- shell如果文件夹不存在则创建
#!/bin/bash build_dir="build" if [ ! -d "$build_dir" ]; then mkdir $build_dir fi ...
- Thinking In Java 4th Chap3 操作符
若String后接一‘+’运算符,其后元素自动转化为String类型 注意:若对对象赋值另一对象,操作对应的是引用,如c=d,则c和d都指向原来d指向的对象 生成随机数:Random rand=new ...