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)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
随机推荐
- Spring switch的使用
首先在html开始标签中引入一个属性 1 xmlns:th="http://www.thymeleaf.org" 示例代码 <div th:switch="${us ...
- ORK
小试OKR一季度之后有感分享,你要不要试试ORK? 封面 OKR已经在国内热火朝天有一阵子了,为了适当的赶时髦,从年初开始团队内部小范围使用ORK模式以便测试团队会有什么化学反应.这篇文章打算写写 ...
- Bootstrap手风琴悬浮下拉框,直接拷~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)
注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...
- sql语句 两表关联查询计算数量
select sum(a1.`num`) from `order_orderlistrow` as a1 INNER JOIN `order_orderlist` as a2 on a1.`ord ...
- 常用的API
API (application programming Interface)应用程序编程接口 java 是字典 Scanner类的功能可以实现从键盘输入到程序当中. 引用类型的一般使用步骤 ·1导包 ...
- Linux系列之压缩与解压
1.压缩技术 1.常用命令实例 1.zip格式的压缩与解压缩 zip是压缩指令,unzip是解压指令.zip指令既可以压缩文件,也可以压缩目录.压缩会自动保留源文件,解压会自动保留压缩文件. zip ...
- VS code 的使用
VS code 是一个非常不错的代码编辑器.它不依赖与任何编译器或者解释器,但却能高效的利用第三方编译器或解释器来给用户提供良好的代码编写环境. 我喜欢VS code的三点,丰富强大的插件,快捷的语法 ...
- 第九章 MIZ702 ZYNQ片上ADC的使用
9.0难度系数★☆☆☆☆☆☆ 9.1实验概述 这次借助zynq的内嵌的XADC来采集zynq内部的一些参数: •VCCINT:内部PL核心电压 •VCCAUX:辅助PL电压 •VREFP:XADC ...
- 【转载】STM32 IAP 在线升级详解
(扩展-IAP主要用于产品出厂后应用程序的更新作用,考虑到出厂时要先烧写IAP 再烧写APP应用程序要烧写2次增加工人劳动力基础上写了“STM32 IAP+APP ==>双剑合一”链接稍后 ...