【iGeek手册】 如何使用bricks.js创建一个像素级别的高性能瀑布流页面特效?

469 阅读1分钟


传统的插件类的瀑布流不能很好的解决页面性能问题,加载过程非常冗余, 特别是如果你使用过类似jQuery masonry等插件的话,相信你明白我的意思,嘿嘿, 而且对于元素的像素级别的控制效果也不是很到位 , 而且往往依赖一些第三方类库,比如 jQuery


在今天这篇文章中, 姥爷我介绍一下一个不错的JS类库 - bricks.js , 下面是一些它的优势:

  • 不需要HTML标签或者CSS样式
  • 简化并且强大可阅读的代码配置
  • 可选的尺寸变化功能操作
  • 优化的添加元素操作


这个插件是开源的, 你可以方便的在Github上下载并且使用, 性能非常强悍, 生成数千个元素的布局,只需要毫秒级别, 大家可以点击这里查看demo:

callmecavs.com/bricks.js/


脚本使用非常简单, 只需要传入三个参数:

  1. Container :一个DOM容器元素用来容纳元素
  2. Packed : 一个定义元素如何排列的属性
  3. Sizes :一个像素级别滴设置宽度和元素间距的数组


更多的配置信息,请参考一下相关文档,如下:

github.com/callmecavs/…




如果大家有更多好的建议和用法,请给我留言 ^_^