Skip to content

Latest commit

 

History

History
64 lines (39 loc) · 4.76 KB

vol.19.md

File metadata and controls

64 lines (39 loc) · 4.76 KB

很大声周刊-vol.19

很大声周刊,在这里记录日常工作、生活所见,每周一发布。

sketch_139_HenDaShengWeekly_vol-19_02_615

img

《设计师如何拥有自己的个人网站(一)》, 在少数派 Martix 社区发布的第一篇文章,聊了聊自己做个人网站的经验,希望对类有似想法的朋友有一定帮助,稍后会同步到公众号中。

bricklayer.js

image

bricklayer.js 是一个轻量级瀑布流布局库。

很大声 Web 2.0 中的瀑布流布局就用到了 beicklayer.js,配置非常简单,几乎是开箱即用(测试代码)。

image

image

在这之前瀑布流布局用到的是 Masonry.js,也挺好用的,可是在 Firefox 上出现 bug,所有元素都堆叠在一块。

Masonry 不支持 Flex Box CSS image

后来发现它不支持 Flex 布局,而我偏偏用到的就是 Flex 布局,所以把瀑布流布局库换成了 bricklayer.js

CSS 实现瀑布流布局

目前实现瀑布流布局需要借助 js 的帮助,上面提到的瀑布流布局库都有 js 参与。

在解决瀑布流布局问题的过程中,还发现一些好玩的事情。

CSS columns

CSS columns 用来设置元素的列宽和列数。

img 它可以轻松“实现”瀑布流布局,网络上有好多类似“CSS 实现瀑布流”这样标题的文章都是这种方法,确实能实现,但几乎没有实用价值,因为排列顺序,它只能先纵向后横向排列(上图),这也符合它原本的功能逻辑,可是通常我们需要的瀑布流布局是这样先横向后纵向的排列(下图)。 img CSS columns 做不到这样,想别的办法吧。

grid-template-rows: masonry

image grid-template-rows: masonry / Masonry Layout MDN,这就是为瀑布流布局而生的 CSS 属性,基于 CSS Grid 布局,可是目前还没得到全面支持,只能在 Firefox 实验功能中实现,希望这个属性尽快被全平台支持,以后瀑布流布局只用 CSS 就能实现了。

Blender 背面材质

Snipaste_2021-09-11_11-49-15

通过 UV 映射 + 几何数据(背面) 实现平面正反面两种材质。

Erindale 的针织材质教程

Snipaste_2021-09-11_11-53-22

和他的节点教程一样,让人眼花缭乱,属于那种看着特别吃力但很过瘾的类型,作者对各个节点的理解让人羡慕。

Snipaste_2021-09-11_11-55-25 Blender 2.93 的欢迎画面就出自 Erindale 之手。

少数派 Matrix 社区

image

Matrix少数派 旗下的写作社区,偏向数字、科技类内容。

我的文章都发布在自己的公众号上,在此之外一直想找一个更垂直、更细分的平台发布,Matrix 社区是个不错的平台。