Gallery 标签组件的使用方法和 Unsplash 高清壁纸分享

水一下文，主要是为了测试一下图库功能，都是高清大图，可以用作壁纸。

瀑布流布局（原图比例）

{% gallery layout:flow %}
...
{% endgallery %}

• 首次打开这个页面时可能会以为图库挂了，上面👆一片空白，其实是正在加载图片。
• 瀑布流如果图片少于两行会感觉比较丑。
• 现在的纯 css 方案是按列顺序布局的，且没有边滑动边一行一行加载的逻辑，图片太多时体验较差。
• 瀑布流始终是三列布局，不支持 size 和 ratio 参数。

如果要解决以上三点问题，感觉成本不低。（如果有大佬知道低成本解决方案，欢迎评论区讨论）

如果是作为文章插图，一般不会一次插入大量的图片，所以感觉还是固定宽高的整齐布局使用场景比较广。（同时就把上面第一条问题解决了）

网格布局（接近原图比例）

{% gallery layout:grid ratio:origin size:xl %}
...
{% endgallery %}

• 同一行的高度比较高的图片会被裁切成和高度最低的图片等高。
• 由于高度是在图片加载出来之后才知道的，所以和瀑布流模式一样会有高度跳变的糟糕体验。
• xl 尺寸始终是两列布局，在移动端也是如此，适合用于对比场景。

网格布局（正方形）

{% gallery layout:grid ratio:square size:s %}
...
{% endgallery %}

• 这种是在图片加载之前就知道且固定高度的布局，体验相对前两种要好很多。
• 相应的缺点就是所有图片都会被裁切成正方形。
• s/m/l 尺寸在不同设备上图片大小相对不变，一行显示多少个取决于页面宽度。

网格布局（正方形+混搭）

{% gallery layout:grid ratio:square size:mix %}
...
{% endgallery %}

• 这种布局在正方形布局的基础上增加了点趣味性。
• 尺寸混搭规则是：1（大）+ 2（小）

经过对比，默认选择了这种布局，如果不喜欢可以在主题配置中修改默认布局：

tag_plugins:
  # {% gallery %}
  gallery:
    layout: grid # grid / flow
    size: mix # s / m / l / xl / mix
    ratio: square # origin / square

不管设置什么默认布局，在实际使用标签组件的时候都可以指定布局，不指定的时候才是默认效果。

参考资料

• Unsplash

许可协议

本文由 xaoxuu 原创，文章内素材由 Unsplash 免费提供。本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

分享文章