学习
实践
活动
工具
TVP
写文章

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

网格布局

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

DOM结构

DOM 结构

中间夹层为了后续拓展。

CSS

CSS Grid 布局

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

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

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

JavaScript

JavaScript

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

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

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

效果

小结

1. HTML 两层或三层,具体看自己需求,建议 3 层用于拓展。

2. CSS Grid 布局,设置行为自动,颗粒度尽量小,不要行间距。

3. JavaScript 通过图片缩放后的高度来设置跨越的行数。

4. 缺点,图片排序会有偏差。

感觉有用,就关注我吧!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180917A0UNH100?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券