开源瀑布流插件Masonry.js: 轻松在你的网站实现瀑布流布局 ...

嗨, 大家好, 我是徐小夕.

  

之前一直在社区分享零代码&低代码的技术实践，也陆连续续设计并开发了多款可视化搭建产品，比如：

  

• Nocode/Doc，可视化+ 零代码打造下一代文件编辑器
  
• 爆肝1000小时, Dooring零代码搭建平台3.5正式上线
  
• 可视化表单&试卷搭建平台技术详解
  

  最近在做无代码平台的模版列表的时候, 须要利用瀑布流布局, 雷同下面这种:
  

  为了研究市面上比力成熟的瀑布流方案, 我在github上找呀找, 突然, 发现了一款设计非常巧妙的方案——Masonry.
  

  

Masonry 在 github 上非常火, 目前已有 16.3k star, 有许多网站都采用它的方案实现瀑布流布局. 在文末我会附上这个开源项目标地点, 方便大家学习参考.

  

接下来我就带大家研究一下这个库, 并快速应用到自己的项目中.

  什么是 Maronry

  

  Masonry 是一个 JavaScript 网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像泥瓦匠在墙上安装石头。我们在互联网上大概看到过许多瀑布流的案例.
  接下来给大家演示一个利用案例:
  

  另一个比力有意思的案例:
  

  当我们动态添加元素的时候, 它可以智能的安排好元素的位置.
  再联想一下, 我们玩的消消乐小游戏和拼图类小游戏, 是不是也能用它一键实现呢?
  

  如何利用 Maronry

  Maronry 支持 CDN 导入和 npm 安装利用, 这里我介绍一下 npm 的安装和利用方式.

1. npm install masonry-layout

复制代码

我们安装好之后可以先编写一下 html 结构:

1. <div class="grid">
2.   <div class="grid-item">FlowMix</div>
3.   <div class="grid-item grid-item--width2">H5</div>
4.   <div class="grid-item">Dooring</div>
5. </div>

复制代码

接下来我们就可以直接利用这个库来初始化瀑布流布局了:

1. var elem = document.querySelector('.grid');
2. var msnry = new Masonry( elem, {
3.   // options
4.   itemSelector: '.grid-item',
5.   columnWidth: 200
6. });
8. // 元素参数是一个选择器字符串
9. var msnry = new Masonry( '.grid', {
10.   // options
11. });

复制代码

利用起来就是这么简单, 当然文档上还有许多高级用法, 我们也可以学习参考一下:
  https://masonry.desandro.com/
  分享几个更高级的案例

  

• 瀑布流布局动画
  
  
  
  

  2. 瀑布流3D动画
  

  技术交换

  我建了一个技术学习交换群, 假如大家感兴趣可以在《趣谈前端》公众号加我微信进群~
  

  末了
  好啦, 今天的分享就到这, 欢迎随时和我留言反馈，发起，技术交换~
  上述项目标GitHub地点:
   https://github.com/desandro/masonry
  

大家也可以关注我的视频号小夕说，后续会做更多的独立产品经验分享~

  往期出色：

  

• Nocode/Doc，可视化+ 零代码打造下一代文件编辑器
  
• 爆肝1000小时, Dooring零代码搭建平台3.5正式上线
  
• 可视化表单&试卷搭建平台技术详解
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。