swift瀑布流实现_CSS 实现瀑布流布局（display: flex）

作者 | chokcoco

本例使用 CSS flex 实现瀑布流布局。

关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放。

代码如下：

HTML：

// pug 模板引擎div.g-container-for(var i = 0; i<4; i++)div.g-queue-for(var j = 0; j<8; j++)div.g-item

SCSS：

$lineCount: 4;$count: 8;

@function randomNum($max, $min: 0, $u: 1) {@return ($min + random($max)) * $u;}

@function randomColor() {@return rgb(randomNum(255), randomNum(255), randomNum(255));}

.g-container {display: flex;flex-direction: row;justify-content: space-between;overflow: hidden;}

.g-queue {display: flex;flex-direction: column;flex-basis: 24%;

}

.g-item {position: relative;width: 100%;margin: 2.5% 0;}

@for $i from 1 to $lineCount+1 {    .g-queue:nth-child(#{$i}) {@for $j from 1 to $count+1 {            .g-item:nth-child(#{$j}) {height: #{randomNum(300, 50)}px;background: randomColor();

&::after {content: "#{$j}";position: absolute;color: #fff;font-size: 24px;top: 50%;left: 50%;transform: translate(-50%, -50%);}}}}}

效果如下(点击 Pug/SCSS 可以对代码进行编辑)：

swift瀑布流实现_CSS 实现瀑布流布局（display: flex）相关推荐

c语言switch瀑布流,两种常见飞瀑流（定位的瀑布流与浮动的瀑布流）
两种常见瀑布流(定位的瀑布流与浮动的瀑布流) 类似蘑菇街,美丽说网站的瀑布流 1.定位的瀑布流: window.onload = function(){ var aLi = document.getE ...
jquery 瀑布流实例最流行瀑布流图片展示
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...
html 瀑布流样式,HTML+CSS07 瀑布流布局
预备知识:Column布局 CSS Columns(多列布局)是一种定义了多栏布局的模块,它能够表现出将内容在列之间怎么流动的以及间隙和分割线怎么使用.浏览器的兼容性还是不错的,生产环境建议-moz和 ...
html瀑布流原理,什么是瀑布流布局？
首先我们来看一下瀑布流布局是什么? 根据百度百科上面的定义我们可以知道瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载 ...
html 瀑布流样式,纯css如何实现瀑布流？css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
android 水平方向瀑布流,Android RecyclerView（瀑布流）水平/垂直方向分割线
Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...
ajax php瀑布流数据库,原生ajax瀑布流demo实例分享
本文主要为大家带来一篇原生ajax瀑布流demo分享(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 简单分为三个文档,有详细的注释:img ...
横向瀑布流android,RecyclerView实现瀑布流布局
1,效果图 image.png 2,导包 implementation 'com.android.support:recyclerview-v7:27.1.1' 3,Xml文件 xmlns:andro ...
使用css实现瀑布流的效果
使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式. 注意要设置列数图片的宽度要一致,否则图片显示会有问题 <!DOCTYPE html> <html la ...

swift瀑布流实现_CSS 实现瀑布流布局（display: flex）

swift瀑布流实现_CSS 实现瀑布流布局（display: flex）相关推荐

最新文章

热门文章