Bricks.js 简单方便的瀑布流插件 - 资源分享

Bricks.js 简单方便的瀑布流插件

发布于 2019-11-06 字数 8404 浏览 1752 评论 0

Bricks.js 是一个用户固定宽度元素堆砌的插件,简单来说就是一个瀑布流插件,作者的说明总是这么绕口,不过也限制了是固定宽度的元素,所以插件的功能很简单,没有什么动画效果。

Bricks.js 简单方便的瀑布流插件


Current masonry solutions lack performance, and are bloated with unnecessary features. In addition, they:

  • Are built on dependencies, like jQuery
  • Mandate HTML markup, or require a CSS stylesheet
  • Position elements with transforms, making animation difficult


Bricks capitalizes on batched reading of layout properties for blazing fast packing time, no matter how many items. Besides performance, it features:

  • No required HTML markup or CSS stylesheet
  • Minimal, powerful, and readable configuration
  • Optional resize handling
  • Optimized handling of dynamically added items


Bricks was developed with a modern JavaScript workflow in mind. To use it, it’s recommended you have a build system in place that can transpile ES6, and bundle modules. For a minimal boilerplate that does so, check out outset.

Using NPM, install Bricks.js, and add it to your package.json dependencies.

$ npm install bricks.js --save

Refer to the releases page for version specific information.


Simply import Bricks, then instantiate it.

It’s recommended that you assign your Bricks instance to a variable. Using your instance, you can:

  • enable and disable the resize handler
  • add and remove event handlers
  • accommodate dynamically added elements
// import Bricks
import Bricks from 'bricks.js'

// create an instance
const instance = Bricks({
  // ...

Parameters passed to the constructor are detailed below.


Note that all parameters are required:


A CSS selector that matches the grid wrapper.

const instance = Bricks({
  container: '.selector'

Note that the direct children of this element must be the grid items.


An attribute added to items already positioned within the grid.

const instance = Bricks({
  packed: 'data-packed'

Note that if the attribute is not prefixed with data-, it will be added.


An array of objects describing the grid’s properties at different breakpoints.

When defining your sizes, note the following:

  • Sizes must be listed smallest to largest
  • Sizes must use min-width media queries (any unit)
  • Width of the grid items at each breakpoint should be set in your CSS (in px)
  • The size without the mq property is assumed to be your smallest breakpoint, and must appear first
// mq      - the minimum viewport width (any unit)
// columns - the number of vertical columns
// gutter  - the space (in px) between the columns and grid items

const sizes = [
  { columns: 2, gutter: 10 },
  { mq: '768px', columns: 3, gutter: 25 },
  { mq: '1024px', columns: 4, gutter: 50 }

const instance = Bricks({
  sizes: sizes

API / Events

Bricks instances are extended with Knot.js, a browser-based event emitter. Use the event emitter syntax to add and remove handlers for the events emitted by the API methods. Review the emitter syntax here.

Bricks exposes the following methods, and corresponding events:

Note that all methods, including those from the event emitter, are chainable.


Used to pack all elements within the container.

// pack ALL grid items

// 'pack' is emitted when ALL items have been packed
instance.on('pack', () => {
  // ...

Note that it should be called when creating your instance, to pack the initial items.


Used to pack elements without the packed attribute within the container.

// pack NEW grid items

// 'update' is emitted when NEW items have been packed
instance.on('update', () => {
  // ...

Note that this is the preferred method for handling dynamically added items, because it will only operate on items that have not yet been packed (i.e. don’t have the packed attribute).


Used to add or remove the resize event handler. It’s recommended that you add the resize handler when you create your instance.

// add or remove the resize handler
  .resize(true)       // 'true' adds it
  .resize(false)      // 'false' removes it

// 'resize' is emitted when resizing has resulted in a new matching 'size' object
instance.on('resize', size => {
  // 'size' is the newly matching size object
  // ...

Note that the resize handler fires the pack method if the resulting screen size matches a size parameter other than the current one. In this case, the pack event will be fired immediately before the resize event. Use the resize event only for breakpoint specific code, not code meant for when the grid has been packed.

Browser Support

Bricks depends on the following browser APIs:

Consequently, it supports the following natively:

  • Chrome 24+
  • Firefox 23+
  • Safari 6.1+
  • Opera 15+
  • IE 10+
  • iOS Safari 7.1+
  • Android Browser 4.4+

To support older browsers, consider including polyfills/shims for the APIs listed above. There are no plans to include any in the library, in the interest of file size.


如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。



需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。





2891 文章
84935 人气



文章 0 评论


文章 0 评论


文章 0 评论


文章 1 评论