owasp bricks_使用Bricks.js创建快速砌体网格布局

但是，砖石网格很难构建，因为它们在页面上分布不均 。 您将获得固定大小的列宽，但项目的高度可以相差很大 。

要制作像素完美的砖石网格，您需要一个诸如Bricks.js的插件。

这个插件是完全开源的，而且非常快。 即使页面上有数十个项目，它也将在不到半秒的时间内呈现网格 。

自从普及布局以来，大多数人都认识到Pinterest的砖石网格。 但是，此后它也已成长为可在许多其他网站中使用 。

要开始使用Bricks.js，您需要一些内容和默认的页面布局 。 您可以直接从npm或通过GitHub安装插件（如果这样更容易）。

在初始设置中，您传递了三个特定参数 ：

1. 容器 –网​​格的DOM容器元素
2. 已打包 -确定项目如何在网格中流动的属性
3. 大小 –以像素为单位定义的宽度和装订线的数组

插件使用所有这些值从头开始自动化砌体网格。

而且，如果您想要像Pinterest一样工作的砌体网格，甚至可以将其用于无限加载 。

签出演示页面以获取可更改以进行测试的交互式网格 。 您定义元素的总数 ，它将在显示总渲染时间的同时使过程自动化。

例如，我测试了一个包含500个元素的网格，仅用了13毫秒即可完成。 这并不考虑所有500张图像的加载时间，但是自动生成的网格13毫秒的印象非常令人印象深刻。

从GitHub下载文件并按照安装说明开始使用。 刚开始时可能会感到困惑，但是您越喜欢它，设置起来就越容易。

翻译自: https://www.hongkiat.com/blog/brickjs-masonry-grid-script/