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

问说网 · 发布于 2016-03-17 · 字数8100 · 浏览 2034 · 评论 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.js特点

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.

Instantiate

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:

container

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.

packed

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.

sizes

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.

.pack()

Used to pack all elements within the container.

// pack ALL grid items
instance.pack()

// '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.

.update()

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

// pack NEW grid items
instance.update()

// '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).

.resize(flag)

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
instance
  .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.

相关链接

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-07-25Pace.js自动加载进度条中文API文档
  • 2015-11-24Knockout.js轻量级的Web开发MVVM框架
  • 2016-01-29利用Meteor进行移动Web开发
  • 2016-03-23一种分层门面(FACADE)设计实现思路
  • 2016-04-23在Photoshop中设计绚丽的几何形状字体
  • 2016-05-14真是太强大了!高效输出移动app产品原型
  • 2016-05-14看了我都动心了!品牌H5营销完全实战指南
  • 2016-05-17移动营销宝典入门篇之移动营销的四个大招
  • 发布评论

    为您推荐

    看了我都动心了!品牌H5营销完全实战指南

    H5技术将如何发展?本文一一为你解答,对于H5这个名词想必大家已经很熟悉了,就在2014年,一项本来还不太成熟的技术在微信的社交舞台大放异彩,让我们见识了“移动…

    • 看了我都动心了!品牌H5营销完全实战指南
    • 看了我都动心了!品牌H5营销完全实战指南
    • 看了我都动心了!品牌H5营销完全实战指南
    • 看了我都动心了!品牌H5营销完全实战指南
    月野兔的小蛮腰 · 发布于 2016-05-14 · 浏览 1251 · 评论 0

    说的太好了!UI设计新手7条法则助你逆袭(一)

    本文编译自Medium,作者是一位UX(User Experience,用户体验)设计师,他通过自己学习UI设计的过程,总结出7条实用的法则,为UI设计新手提供…

    • 说的太好了!UI设计新手7条法则助你逆袭(一)
    • 说的太好了!UI设计新手7条法则助你逆袭(一)
    • 说的太好了!UI设计新手7条法则助你逆袭(一)
    • 说的太好了!UI设计新手7条法则助你逆袭(一)
    CampNydia · 发布于 2016-05-16 · 浏览 1170 · 评论 0

    一款APP从设计稿到切图全揭秘

    我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧。公司不同,流程不尽相同,但是终究还是…

    • 一款APP从设计稿到切图全揭秘
    • 一款APP从设计稿到切图全揭秘
    • 一款APP从设计稿到切图全揭秘
    • 一款APP从设计稿到切图全揭秘
    ONeilMerry · 发布于 2016-03-08 · 浏览 1248 · 评论 0
    问说网 · 发布于 2016-05-19

    KeyboardJS捕捉键盘快捷键事件插件

    KeyboardJS是一个非常实用的插件,使用这个类库你可以很方便的捕捉输入键的组合,可以帮助你很好的添加相关快捷键的操作事件。

    Blueberry响应式轻量级的jQuery幻灯片插件
    问说网 · 发布于 2016-06-15

    Blueberry响应式轻量级的jQuery幻灯片插件

    Blueberry响应式轻量级的jQuery幻灯片插件,专门为响应网页设计编写jQuery的图像滑块。,特别适合支持流体和响应式的网页布局设计,Blueberr…

    angularAMD使用RequireJS和AngularJS快速构建WebApp
    问说网 · 发布于 2016-07-05

    angularAMD使用RequireJS和AngularJS快速构建WebApp

    angularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web Ap…

    详细讲解JAVA中的IO流
    Vincent · 发布于 2016-07-06

    详细讲解JAVA中的IO流

    包 java.io   文件路径 1. java.io.File是文件和目录路径名的抽象表示形式 2. 抽象路径名中的第一个名称是目录名,抽象路径名中…

    Tmux – Linux从业者必备利器
    问说网 · 发布于 2016-08-14

    Tmux – Linux从业者必备利器

    tmux是linux中一种管理窗口的程序。那么问题来了:Mac自带的Iterm2很好用啊。既支持多标签,也支持窗体内部Panel的分割,为什么还要用tmux?

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13177 文章
    493 评论
    2121 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3658

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 3415

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3687

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2922

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3159

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 走了留下什么

    文章 110 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 无感觉

    文章 91 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!