为了账号安全,请及时绑定邮箱和手机立即绑定

【前端骚操作】Grid布局20行代码快速生成瀑布流

网格布局

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


DOM结构

DOM

中间夹层为了后续拓展。


CSS

.grid {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 10px;
    grid-column-gap: 4px;
    height: e('calc(100% - 32px)');
    overflow-y: scroll;
}

.img-container {
    .img {
        width: 100%;
        height: auto;
    }
}

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

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

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


JavaScript

return m('.img-container', { : this.clickImg, style: `grid-row: auto / span ${this.rows}` }, [
      m("img.img[alt='img']", {
        src: url,
        : e => {
          const rows = Math.ceil(e.target.height / 10)
          this.rows = rows
        }
      })
    ])

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

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

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


效果

实际效果


小结

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

欢迎关注,如有需要 Web,App,小程序,请留言联系。

点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
1.6万
获赞与收藏
893

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消