Grid布局20行代码快速生成瀑布流
网格布局
Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点。
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 = ~~(e.target.height / 10) + 1
this.rows = rows
}
})
])
这是 Mithril.js 的代码,知道我的都清楚我最近用这个。
代码意思就是给夹层根据图片高度设置所在网格行,auto 是自动放置在某行,span X 是跨越多少行,这里跨越多少取决于图片高与颗粒度的商,商 + 1 是为了留白。
这里的 10 对应的是 CSS 里面的 10px,注意下。
效果
小结
- HTML 两层或三层,具体看自己需求,建议 3 层用于拓展。
- CSS Grid 布局,设置行为自动,颗粒度尽量小,不要行间距。
- JavaScript 通过图片缩放后的高度来设置跨越的行数。
- 缺点,图片排序会有偏差。
Grid布局20行代码快速生成瀑布流的更多相关文章
- HTML5游戏实战(4): 20行代码实现FlappyBird
这个系列很久没有更新了.几个月前有位读者调侃说,能不能一行代码做一个游戏呢.呵呵,接下来一段时间,我天天都在想这个问题,怎么能让GameBuilder+CanTK进一步简化游戏的开发呢.经过几个月的努 ...
- 20 行代码极速为 App 加上聊天功能
现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + ...
- Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)
接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...
- 利用Python几行代码批量生成验证码
几行代码批量生成authCode 整体步骤: 1.创建图片 2.创建画笔 3.在图片上生成点 4.在图片上画线 5.在图片在画圆 6.在图片在写文本 7.在图片在生成指定字体的文本 代码奉上 #!/u ...
- JS模版引擎[20行代码实现模版引擎读后感]
曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...
- 20 行代码:Serverless 架构下用 Python 轻松搞定图像分类和预测
作者 | 江昱 前言 图像分类是人工智能领域的一个热门话题.通俗解释就是,根据各自在图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法. 它利用计算机对图像进行定量分析,把图像或图像中 ...
- HTML5游戏实战之20行代码实现打地鼠
之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或 ...
- 3行代码快速实现Spring Boot Oauth2服务
这里的3行代码并不是指真的只需要写3行代码,而是基于我已经写好的一个Spring Boot Oauth2服务.仅仅需要修改3行数据库配置信息,即可得到一个Spring Boot Oauth2服务. 项 ...
- 关于瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...
随机推荐
- Python tuple
元组其实跟列表差不多,也是存一组数,只不是它一旦创建,便不能再修改,所以又叫只读列表 语法 names = (a,b,c) 它只有2个方法,一个是count,一个是index. 当然也有可变元祖: 可 ...
- 转:在网站开发中很有用的8个 jQuery 效果【附源码】
原文地址:http://www.cnblogs.com/lhb25/p/amazing-jquery-effects.html jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 ...
- 【排序算法】冒泡排序(Bubble Sort)
0. 说明 参考 维基百科中的冒泡排序 冒泡排序 (Bubble Sort) 是与插入排序拥有相等的执行时间,但是两种算法在需要的交换次数却很大地不同. 在最坏的情况,冒泡排序需要 O(n2) 次交 ...
- Coursera-AndrewNg(吴恩达)机器学习笔记——第四周
神经网络 1.神经网络发展的动力:在逻辑回归解决复杂的分类问题时,我们使用属性的一些组合来构造新的属性(x12,x1x2,x22...),这样就会造成属性的数目n过多,带来了大量的运算,甚至造成过拟合 ...
- 乘风破浪:LeetCode真题_033_Search in Rotated Sorted Array
乘风破浪:LeetCode真题_033_Search in Rotated Sorted Array 一.前言 将传统的问题进行一些稍微的变形,这个时候我们可能无所适从了,因此还是实践出真知, ...
- 移动端真机调试抓包,fiddler web debugger
小白一枚,在公司大神指导下加之找了好多资料才勉强将fiddler的使用摸透,果然很好用. 一.设置手机 二.设置fiddler
- SDN第五次上机作业--基于组表的简单负载均衡
0.作业链接 http://www.cnblogs.com/easteast/p/8125383.html 1.实验目的 1.搭建如下拓扑并连接控制器 2.下发相关流表和组表实现负载均衡 3.抓包分析 ...
- 团队作业——Beta冲刺2
团队作业--Beta冲刺 冲刺任务安排 杨光海天 今日任务:根据冲刺内容,具体分配个人任务,对于冲刺内容做准备 明日任务:图片详情界面的开发 吴松青 今日任务:学习熟悉安卓开发,跟随组员快速了解其代码 ...
- 当我们跑SparkSQL时候为了更好地了解SparkSQL运行,可以WEBUI看SQL的Tab
- Shell脚本查询进程存活信息
脚本代码如下: pid=`cat $2` function status_job(){ pcount=`ps -ef |grep $pid |grep -v grep |wc -l` if [ $pc ...