推荐一个十分实用的VUE瀑布流插件Masonry

叁歲伎倆 2022-04-18 04:09 2918阅读 1赞

## Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1.3w+ stars。如果你想使用瀑布流提升网站体验，Masonry将是不错的选择。 ##

## 啥是瀑布流： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]  
是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。  
最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格,像花瓣网、蘑菇街、美丽说等。

## 依赖：jQuery ##

## 官网（被墙）：[https://masonry.desandro.com/][https_masonry.desandro.com] ##

## github:[https://github.com/desandro/masonry][https_github.com_desandro_masonry] ##

## 如何引入： ##

1.cdn:`<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>`  
2.npm:`npm install masonry-layout`  
3.Bower:`bower install masonry --save`  
4.下载到本地,直接引入

## html: ##

## 2种配置方案： ##

// jQuery方式
    $('.grid').masonry({
      columnWidth: 200,
      itemSelector: '.grid-item'
    });
    
    <div class="grid" data-masonry='{ "columnWidth": 200, "itemSelector": ".grid-item" }'>

如果是一般的瀑布流上面的简单配置基本可以了；万一你的是百分百布局的话，你可以参考官网中的案例（下图位置）；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]

## 全部配置（根据需要选择吧）： ##

$('.grid').masonry({
      columnWidth: 200,
      itemSelector: '.grid-item'，     // 要布局的网格元素
      gutter：10,                      // 网格间水平方向边距，垂直方向边距使用css的margin-bottom设置
      percentPosition：true,           // 使用columnWidth对应元素的百分比尺寸
      stamp:'.grid-stamp',             // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方
      fitWidth: true,                  // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示
      originLeft: true,                // 默认true网格左对齐，设为false变为右对齐
      originTop: true,                 // 默认true网格对齐顶部，设为false对齐底部
      containerStyle: { position: 'relative' },     // 设置容器样式
      transitionDuration: '0.8s',      // 改变位置或变为显示后，重布局变换的持续时间，时间格式为css的时间格式
      stagger: '0.03s',                // 重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间  
      resize： false,                  // 改变窗口大小将不会影响布局
      initLayout: true,                // 初始化布局，设未true可手动初试化布局
    });

## 所有方法： ##

$grid.masonry();                             // 重新布局
    $grid.masonry( options );                    // 修改设置，再重新布局
    $grid.masonry( 'layoutItems', items, isStill );     // 重布局指定元素，isStill接受布尔值，表示是否变换
    $grid.masonry( 'stamp', $stamp );            // 固定元素
    $grid.masonry( 'unstamp', $stamp );          // 解除固定
    $grid.masonry( 'appended', elements );       // 在最后添加元素
    $grid.masonry( 'prepended', elements );      // 在最前添加元素    
    $grid.masonry( 'addItems', elements );       // 添加元素，但不布局
    $grid.masonry( 'remove', elements );         // 删除元素

## 事件： ##

var msnry = $grid.masonry( 'on', eventName, listener );
    var msnry = $grid.masonry( 'off', eventName, listener );
    var msnry = $grid.masonry( 'once', eventName, listener );
    
    $grid.on( 'layoutComplete', function( event, items ) {
      console.log( items.length );
    });
    $grid.on( 'removeComplete', function( event, removedItems ) {...} )

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: /images/20220418/f718ec338acd4643a1526efc4873e5b8.png
[https_masonry.desandro.com]: https://masonry.desandro.com/
[https_github.com_desandro_masonry]: https://github.com/desandro/masonry
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]: /images/20220418/8ea708c841494ce4a483b3257ccb63d4.png