分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 网页前端 > CSS

Grid布局20行代码快速生成瀑布流

时间：2018-09-17 23:12 作者：风蓝小栖来源：风蓝小栖阅读：399
扫一扫，手机访问

摘要：网格布局Grid 布局，好用又简单，至少比 Flex 要人性化一点，美中不足就是浏览器支持度差点。DOM结构DOM 结构中间夹层为了后续拓展。CSSCSS Grid 布局.grid 的意思是网格布局，2 列平分宽度，单行为 10px，自动拓展行数，列间距 4px，超出高度滚动。这里 10px 是颗粒

网格布局

Grid 布局，好用又简单，至少比 Flex 要人性化一点，美中不足就是浏览器支持度差点。

DOM结构

Grid布局20行代码快速生成瀑布流

DOM 结构

中间夹层为了后续拓展。

CSS

Grid布局20行代码快速生成瀑布流

CSS Grid 布局

.grid 的意思是网格布局，2 列平分宽度，单行为 10px，自动拓展行数，列间距 4px，超出高度滚动。

这里 10px 是颗粒度，颗粒度越小，效果越好。注意，颗粒度与行间距有关，颗粒度小，行间距最好为 0，颗粒度大可以有适量的行间距，但是建议仍然是 0。

图片设置 width 为 100%，是表明为等宽瀑布。

JavaScript

Grid布局20行代码快速生成瀑布流

JavaScript

这是 Mithril.js 的代码，知道我的都清楚我最近用这个。

代码意思就是给夹层根据图片高度设置所在网格行，auto 是自动放置在某行，span X 是跨越多少行，这里跨越多少取决于图片高与颗粒度的商，商 + 1 是为了留白。

这里的 10 对应的是 CSS 里面的 10px，注意下。

效果

Grid布局20行代码快速生成瀑布流

实例

小结

HTML 两层或者三层，具体看自己需求，建议 3 层用于拓展。
CSS Grid 布局，设置行为自动，颗粒度尽量小，不要行间距。
JavaScript 通过图片缩放后的高度来设置跨越的行数。
缺点，图片排序会有偏差。

感觉有用，就关注我吧！

全部评论(0)

上一篇：前台工程师必需遵守的高质量的前台代码规范，你写代码是这样做吗？
下一篇：vue的调色盘按钮

最新发布的资讯信息
【系统环境|windows】百度网盘如何加入群组(2021-03-01 21:29)
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上，小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员，需要学习什么？(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展（纯干货）(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)

源码驿站

店铺

血鸟云

推荐商品

资讯排行榜
更多>>

手机访问领取大礼包