但是,砖石网格很难构建,因为它们在页面上分布不均 。 您将获得固定大小的列宽,但项目的高度可以相差很大 。
要制作像素完美的砖石网格,您需要一个诸如Bricks.js的插件。
这个插件是完全开源的,而且非常快。 即使页面上有数十个项目,它也将在不到半秒的时间内呈现网格 。
自从普及布局以来,大多数人都认识到Pinterest的砖石网格。 但是,此后它也已成长为可在许多其他网站中使用 。
要开始使用Bricks.js,您需要一些内容和默认的页面布局 。 您可以直接从npm或通过GitHub安装插件(如果这样更容易)。
在初始设置中,您传递了三个特定参数 :
插件使用所有这些值从头开始自动化砌体网格。
而且,如果您想要像Pinterest一样工作的砌体网格,甚至可以将其用于无限加载 。
签出演示页面以获取可更改以进行测试的交互式网格 。 您定义元素的总数 ,它将在显示总渲染时间的同时使过程自动化。
例如,我测试了一个包含500个元素的网格,仅用了13毫秒即可完成。 这并不考虑所有500张图像的加载时间,但是自动生成的网格13毫秒的印象非常令人印象深刻。
从GitHub下载文件并按照安装说明开始使用。 刚开始时可能会感到困惑,但是您越喜欢它,设置起来就越容易。
翻译自: https://www.hongkiat.com/blog/brickjs-masonry-grid-script/