2019年终岁尾，最近对布局相关的内容比较有兴趣，在此整理一下和瀑布流相关的使用场景以及多种实现方案。 瀑布流又称瀑布流式布局，是一种比较流行的页面布局方式，专业的英文名称为[Masonry Layouts]。与传统的分页显示不同，视觉表现为参差不齐的多栏布局，最早是由Pint…

水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： 嗯。这里其实就涉及了一个问题，如何让 margin: auto 在垂直方向上生效？ 让元素相对父元素水平居中。但是如果我们想让元素相对父元素垂直居中的话…

Web 页面性能是前端开发特别需要关注的重点，评判前端 Web 页面性能的指标有很多，页面的流畅度是其中的一种，如何让页面变得 “柔顺丝滑”，要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候，就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出…

事情要从最近看的《WebKit技术内幕》说起，第二章介绍了网页的结构，其中提到了Webkit硬件加速的方式，会把需要渲染的元素放到特定的『Composited Layer』中，在chrome的控制台可以这样开启：

今年Q1（2020年第一季度）参与了京喜事业部「京喜工厂」业务的前端开发。用户可以通过「京喜工厂」参与口罩、抽纸、大米等商品的“在线生产”，既能趣味造物，又能免费领奖品。目前可以通过「京喜」小程序首页访问该活动。 活动在上线一个月后，PV达到千万的量级，引人注目。有不少前端同学…

使用 Flexible 实现手淘 H5 页面的终端适配

拖放（drap && drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 然后，我们一步步看下这个过程中，会发生的事情。 在HTML5标准中，为了使元素可拖动，把draggable属性…

项目开发中经常需要用到元素大小，网页高度，视口高度，各种距离等等，本文总结了获取各种宽高、距离的方法。 注意：这些方法都不考虑混杂模式，请确保你的文档在标准模式下（填写了正确的doctype）否则获取的值会不准。 1. 获取整个网页高度与宽度 1. 火狐不兼容document.…

前言 不管是开发 Android 已久的老司机，还是刚刚上车的新司机，都肯定会对一件事情深恶痛绝：图片适配（尤其是在美工不给力的条件下）！为什么 Android 手机要有这么多不同的分辨率？ 为什么我的图片在这台手机上显示地好好的完全符合设计图的要求结果换到另一台手机上就变形了…