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

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

今天分享一个好用的瀑布流插件,Masonry是最流行的瀑布流插件之一,配置简单,功能强大,在Github上收获了1.3w+ stars。可见非常之火,所以如果你想使用瀑布流提升网站体验,Masonry将是不错的选择。下面来看下啥是瀑布流?请看下图:

 

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

 依赖:jQuery

官网(被墙):https://masonry.desandro.com/
github: 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:

<div class="grid"> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    ... 
</div>

两种配置方案:

// jQuery方式 

$('.grid').masonry({ columnWidth: 200, itemSelector: '.grid-item' }); 

<!-- 内嵌HTML方式,不推荐 -->

<div class="grid" data-masonry='{ "columnWidth": 200, "itemSelector": ".grid-item" }'>

如果是一般的瀑布流上面的简单配置基本可以了;万一你的是百分百布局的话,你可以参考官网中的案例(下图位置);

 

全部配置(根据需要选择吧):

$('.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 ) {...} )

 

此文章搜集与CSDN, 如有侵权请与我联系下架。

未经允许不得转载:小月博客 » 推荐一个十分实用的VUE瀑布流插件Masonry
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏