瀑布流插件Masonry的配置和使用

waterc 发布于2019-08-22 10:42 / 1470人阅读

摘要：是最流行的瀑布流插件之一，配置简单，功能强大，在上收获了。如果你想使用瀑布流提升网站体验，将是不错的选择。瀑布流，又称瀑布流式布局。需要注意的是，如果你需要加载图片，不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用插件。

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

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

需要注意的是，如果你需要加载图片，Masonry不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用imagesloaded插件。
imagesloaded配置与使用

安装方式

Bower

bower install masonry --save

Npm

npm install masonry-layout

加载

html代码

...

配置方式

// jQuery方式
$(".grid").masonry({
  columnWidth: 200,
  itemSelector: ".grid-item"
});

// Vanilla方式
var msnry = new Masonry( ".grid", {
  columnWidth: 200,
  itemSelector: ".grid-item"
});

设置网格宽度

columnWidth: 80
columnWidth: elements
columnWidth: ".grid-sizer"
.grid-item { width: 20%; }

全部属性配置

$(".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可手动初试化布局
});

方法调用方式

// jQuery方式。重新布局，添加元素，另一种方式添加元素，重新布局
$grid.masonry().append( elem ).masonry( "appended", elem ).masonry();

// vanilla方式。同上
var msnry = new Masonry( ".grid", {...});
gridElement.appendChild( elem );
msnry.appended( elem );
msnry.layout();

全部方法

$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 );         // 删除元素

全部事件

// jQuery方式
var msnry = $grid.masonry( "on", eventName, listener );
var msnry = $grid.masonry( "off", eventName, listener );
var msnry = $grid.masonry( "once", eventName, listener );

// vanilla方式
msnry.on( eventName, listener );
msnry.off( eventName, listener );
msnry.once( eventName, listener );

// jQuery,布局完成事件和移除完成事件
$grid.on( "layoutComplete", function( event, items ) {
  console.log( items.length );
});
$grid.on( "removeComplete", function( event, removedItems ) {...} )     

// vanilla，同上
msnry.on( "layoutComplete", function( event, items ) {
  console.log( items.length );
});
msnry.on( "removeComplete", function( event, removedItems ) {...} )

Utilties

$grid.masonry("reloadItems");     // 重新载入元素，适用Angular和React被改变DOM元素后
$grid.masonry("destroy");         // 移除Masonry,元素返回初试化前状态
var elems = $grid.masonry("getItemElements");     // 返回网格元素
var msnry = $(".grid").data("masonry");           // 返回Masonry实例
var msnry = Masonry.data( $(".grid")[0] );        // 根据网格，返回Masonry实例

云服务器 GPU云服务器瀑布流瀑布流方式使用jquery masonry gridview瀑布流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91123.html

瀑布流插件Masonry中文文档【翻译】

摘要：本位为官方文档翻译，原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠，可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。本位为Masonry官方文档翻译，原始链接安装Install 下载下载压缩或未压缩的masonry masonry.pkgd.min.js （压缩...

soasme 2019-08-22 15:18 评论0 收藏0
推荐JS插件：imagesLoaded，监测图片加载情况并提供相应的事件（加载成功/失败）

摘要：为了保证在拿到图片高度，也即图片加载完成后再进行排列，我根据的推荐，选用了这一款插件。另外，在做一些图片加载效果的时候也可以用到，比如说图片未加载完成之前放个图，加载失败时放个错误提示什么的都很方便呢。惯例，首先贴上imagesLoaded的官方网址：http://imagesloaded.desandro.com/ 第一次知道imagesLoaded这个插件是在做瀑布流布局时，当时...

atinosun 2019-08-22 10:59 评论0 收藏0
avalon与masonry的结合

摘要：相关组件版本最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得最成熟，所以就选用了它。测试的结果很令人沮丧，依然没有控制节点的位置，所以应该不是这个问题。相关组件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得masonry最成熟，所以就选用了它。而在之前开发后台...

Kosmos 2019-08-22 10:59 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

MkkHou 2019-08-29 16:16 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

ssshooter 2019-08-23 10:40 评论0 收藏0