Masonry–“瀑布流” 布局

互联网世界
互联网世界
互联网世界
1297
文章
4
评论
2020年3月11日16:28:57 评论 689 10392字阅读34分38秒
摘要

Masonry.js是一个以“瀑布流”布局呈现网页元素的JS库,它可以使多个不规则宽高的元素以恰当的顺序排列 ,增加美观度。

Masonry.js是一个以“瀑布流”布局呈现网页元素的JS库,它可以使多个不规则宽高的元素以恰当的顺序排列 ,增加美观度。

基本的使用方法如下(以下内容翻译自masonry官网: https://masonry.desandro.com/):

HTML:

1.导入masonry.js库

2.以两层结构包裹将要使用这种布局的元素,结构如下:

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

在.grid-item里面分别放置显示的内容元素。

CSS:

item元素的尺寸设置全部在CSS内进行,如:

1 .grid-item { width: 200px; }
2 .grid-item--width2 { width: 400px; }

初始化:

提供三种初始化的方式,可按任意选择

1.以Jquery插件的方式

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

对选中元素应用masonry方法,并设置初始化参数(参数为对 象格式)。

2.以原生JS方式初始化:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
 //属性设置
  itemSelector: '.grid-item',
  columnWidth: 200
});

var msnry = new Masonry( '.grid', {
  //属性设置
});

第一个参数为外层容器元素(可以是一个原生DOM对象;或者是能唯一确定该元素的,以“’选择器”语 法表示的字符串),第二个参数是初始化配置对象。

3.直接在HTML中初始化:

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

在自定义属性data-masonry里直接初始化配置对象。选择这种方式 的话,就无需另写JS了。

注意:配置对象必须是有效的JSON格式对象,键名必须使用双引号包围,而因此 data-masonry的值需要使用单引号。

另外,在Masonry v3中初始化是对外层容器元素添加js-masonry类 ,并在data-masonry-options中进行的初始化,Masonry v4能够向下兼 容这种写法。

布局

所有尺寸与样式设置都由CSS完成,如:

.grid-item {
  float: left;
  width: 80px;
  height: 60px;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { width: 160px; }
.grid-item--height2 { height: 140px; }

响应式布局

item的尺寸可以设置为百分比来满足响应式设计的需求,如:

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>
1 /* 元素宽度为布局空间宽度的20% */
2 .grid-sizer,
3 .grid-item { width: 20%; }
4 /* 40% */
5 .grid-item--width2 { width: 40%; }
$('.grid').masonry({
  // 将itemSelector设为.grid-item,这样.grid-sizer就不会被作为item的宽度使用
  itemSelector: '.grid-item',
  // 直接以类来设置属性
  columnWidth: '.grid-sizer',
  percentPosition: true
})

imagesLoaded

未加载完全的图片可能会脱离Masonry的布局,并导致item元素发生重叠,而使用imagesLoaded可以解决这个问题。 imagesLoaded是一款独立的JS脚本,你可以在这里看到更多与imagesloaded相关的信息。

初始化Masonry,然后在每张图片加载完成后触发layout,如:

// 初始化 Masonry
var $grid = $('.grid').masonry({
  // 属性设置...
});
// 每张图片加载完成后触发layout
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

或者,你可以在所有图片加载完成后初始化Masonry,如:

var $grid = $('.grid').imagesLoaded( function() {
  // 在所有图片加载完成后初始化Masonry
  $grid.masonry({
    // 属性设置...
  });
});

属性

所有属性都是可选的,但建议每次都设置columnWidth和itemSelector。

itemSelector

确定哪些元素作为item元素,对其启用“瀑布流”布局。itemSelector可以有效排除在容器内,但不应用 “瀑布流”的元素,如:

itemSelector: '.grid-item'
<div class="grid">
  <!-- do not use banner in Masonry layout -->
  <div class="static-banner">Static banner</div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

效果如下:

Masonry--“瀑布流” 布局

columnWidth

容器内每一列的宽度。建议每次都设置该属性,当未设置时,Masonry会自动以第一个元素的宽度为列宽,可能会造成意外 的效果,如:

<div class="grid">
  <!-- do not use banner in Masonry layout -->
  <div class="static-banner">Static banner</div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
1 .grid-item { width: 160px; }
2 .grid-item--width2 { width: 320px; }

效果如下:

Masonry--“瀑布流” 布局

第一列宽度为320px,则Masonry默认列宽度也为320px,若后面出现宽度小于320px的元素,其右侧会出现空白,非常难看 。

列宽可以设为固定值,也可以使用符合“选择器”语法的字符串,Masonry会自动寻找其值并添加,如:

columnWidth: '.grid-sizer'

而当设置percentagePositon属性为true,并设置columnWidth为百分比后,可以启用响应式模式。

布局属性

gutter

元素水平方向的间隙,如:

gutter: 10

效果图:

Masonry--“瀑布流” 布局

若想设置垂直方向上的间隙,请使用CSS margin:

1 .grid-item {
2   margin-bottom: 10px;
3 }

同样的,gutter也可以设置为百分比,以满足响应式设计,如:

<div class="grid">
  <!-- do not use banner in Masonry layout -->
  <div class="static-banner">Static banner</div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
.grid-sizer,
.grid-item { width: 22%; }

.gutter-sizer { width: 4%; }

.grid-item--width2 { width: 48%; }
1 columnWidth: '.grid-sizer',
2 gutter: '.gutter-sizer',
3 itemSelector: '.grid-item',
4 percentPosition: true

效果如图:

Masonry--“瀑布流” 布局

horizontalOrder

规定元素是否始终从左到右排列,若为false,可能出现意外的效果,如:

Masonry--“瀑布流” 布局

上图中,元素7和8优先填满垂直方向控件更大(即该列已有元素的总高度最下。当然,总高度相同,还是按规定的水平顺 序排列),而不是优先出现在元素9的位置。

percentPosition

规定将元素定位设成百分比。设为true后,元素不必再调整自身宽度来适应容器的尺寸变化。

stamp

规定哪些元素在布局中是固定的,只能在初始化Masonry实例时可以使用stamp来固定元素。其他元素会一次排列在stamp元 素的下(后)面,如:

<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ....
</div>
.stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}
.stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}
.stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}
itemSelector: '.grid-item',

stamp: '.stamp

效果如图:

Masonry--“瀑布流” 布局

fitWidth

规定容器元素自动调整自身宽度为item元素 列数*列宽,从而,使得容器元素能够设置为在其父元素中水平居中显示,如 :

Masonry--“瀑布流” 布局

注意:fitWidth不能与百分比一起使用,不论columnWidth还是item元素的宽度,都必须 使用固定值,否则,容器元素和item元素的宽度会在一端坍缩。

在Masonry v3中的等价属性是isFitwIdth,且isFitWidth在v4中仍然可以使用。

originLeft

规定元素水平方向的排列顺序,默认为true,即从左到右排列;设为false,可以使元素从右向左排列,如图:

Masonry--“瀑布流” 布局

在Masonry v3中的等价属性为isOriginLeft,在v4中仍然可 以使用。

originTop

规定元素垂直方向的排列顺序,默认为true,即从上到下排列;设为false,可以使元素从下向上排列,如图:

Masonry--“瀑布流” 布局

在Masonry v3中的等价属性为isOriginTop ,在v4中仍然可以使用。

设定参数

containerStyle

将containerStyle设为null,可以使设置在容器元素上的样式全部失效。

transitionDuration

延长item元素从原来的位置到达新位置的过渡时间,默认为0.4秒,使用css时间格式设置,如:

// 快速过渡
transitionDuration: '0.2s'

// 慢速过渡
transitionDuration: '0.8s'

// 无过渡效果,立即移动到新位置
transitionDuration: 0

stagger

规定元素位置改变时,每次只移动一个元素。可以使用CSS时间格式或一个数字(以毫秒计),如图:

Masonry--“瀑布流” 布局

resize

当窗口尺寸变化时,调整元素的尺寸和位置,默认为true。

在v3中的等价属性为isResizeBound,在v4中仍然可以使用。>

initLayout

使布局初始化,默认为true,设为false可以暂停布局的初始化,从而方便在初始化前向Masonry添加事件或方法, 如:

var $grid = $('.grid').masonry({
  // 禁止布局初始化
  initLayout: false,
  //...
});
// 绑定事件处理器
$grid.masonry( 'on', 'layoutComplete', function() {
  console.log('layout is complete');
});
// 触发布局初始化
$grid.masonry();

在v3中的等价属性为isInitLayout ,在v4中仍然可以使用。

方法

使用jQuery时,方法遵循jQuery UI模式.masonry('methodName' /* arguments */ ),如:

1 $grid.masonry()
2   .append( elem )
3   .masonry( 'appended', elem )
4   // 布局
5   .masonry();

注意: jQuery的链式语法将在带有返回值的方法出中断(如:getItemElements, getItem,on,off)。

在使用原生JS时,方法的使用类似 masonry.methodName( /* arguments */ ),与jQuery不同,此时不能使用链式语法,如:

1 var msnry = new Masonry( '.grid', {...});
2 gridElement.appendChild( elem );
3 msnry.appended( elem );
4 msnry.layout();

布局相关

layout / .masonry()

对元素按规则进行排列,layout在元素尺寸发生变化,且所有元素、需要重新排列是非常有用。

layoutItems

对指定元素执行排列

1 // jQuery
2 $grid.masonry( 'layoutItems', items, isStill );
3 // 原生JS
4 msnry.layoutItems( items, isStill );
  • items  Masonry.Items组成的数组
  • isStill  Boolean  禁止过渡效 果

stamp

固定指定元素,其他item元素围绕stamp元素排列

1 // jQuery
2 $grid.masonry( 'stamp', elements );
3 // 原生JS
4 msnry.stamp( elements );
  • elements  原 生元素,jQuery对象,节点列表或者原生元素数组

unstamp

取消元素的固定效果,其他元素将不再围绕stamp元素排列

添加和移除item元素

appended

添加新元素到容器末尾,并对所有受影响元素进行重新排列

1 // jQuery
2 $grid.masonry( 'appended', elements );
3 // 原生JS
4 msnry.appended( elements );
  • elements  原 生元素,jQuery对象,节点列表或者原生元素数组

栗子:

$('.append-button').on( 'click', function() {
  // 创建新item元素
  var $items = $('<div class="grid-item">...</div>');
  // 将新元素添加到容器元素
  $grid.append( $items )
    // 对新元素和受影响的元素进行重新排列
    .masonry( 'appended', $items );
});

在jQuery中可以直接用HTML字符串创建元素对象,但原生JS并不支持。当使用jQuery的AJAX方法(如:$get(),$ajax()等 )时,记得将内容包装成jQuery对象后。再执行添加操作,如:

// 这并不能起作用
$.get( 'page2', function( content ) {
  // HTML字符串虽然能够被添加,但item元素无法添加到Masonry
  $grid.append( content ).masonry( 'appended', content );
});

// 这是正确的用法
$.get( 'page2', function( content ) {
  // 将内容包裹在jQuery对象中
  var $content = $( content );
  // 添加jQuery对象到Masonry实例
  $grid.append( $content ).masonry( 'appended', $content );
});

prepended

添加新元素到容器元素的开头,并对所有受影响元素执行重排

1 // jQuery
2 $grid.masonry( 'prepended', elements );
3 // 原生JS
4 msnry.prepended( elements );
  • elements  原 生元素,jQuery对象,节点列表或者原生元素数组

栗子:

$('.prepend-button').on( 'click', function() {
  // 创建新的item元素
  var $items = $('<div class="grid-item">...</div>');
  // 添加新元素到容器元素开头
  $grid.prepend( $items )
    // 添加新元素到Masonry实例并对所有受影响元素执行重排
    .masonry( 'prepended', $items );
});

addItems

添加新元素到Masonry实例,但不执行重排

1 // jQuery
2 $grid.masonry( 'addItems', elements );
3 // 原生JS
4 msnry.addItems( elements );
  • elements  原生元素,jQuery对象,节点列表或者原生元素数组

remove

从Masonry和DOM中移除指定元素

1 // jQuery
2 $grid.masonry( 'remove', elements );
3 // 原生JS
4 msnry.remove( elements );
  • elements  原生元素,jQuery对象,节点列表或者原生元素数组

一个栗子:

$grid.on( 'click', '.grid-item', function() {
  // 移除被点击的item
  $grid.masonry( 'remove', this )
    // 对剩余元素执行重排
    .masonry('layout');
});

事件

on

添加一个Masonry事件监听器

1 // jQuery
2 var msnry = $grid.masonry( 'on', eventName, listener );
3 // 原生JS
4 msnry.on( eventName, listener );
  • eventName  String  ·  Masonry事件名
  • listener  监听器方法

once

添加一个只执行一次的事件监听器

1 // jQuery
2 var msnry = $grid.masonry( 'once', eventName, listener );
3 // 原生JS
4 msnry.once( eventName, listener );
  • eventName  String · Masonry事件名
  • listener 监听器方法

Utilities

reloadItems

Recollects all item elements.(应该是元素内容变化后,重新收集并整理元素的意思)

对于像Angular和React之类的框架,将改变应用到DOM和Masonry,使用reloadeItems可能更有用。

1 // jQuery
2 $grid.masonry('reloadItems');
3 // 原生JS
4 msnry.reloadItems();

destroy

完全移除Masonry方法,执行后元素会恢复未应用“瀑布流”布局的状态

1 // jQuery
2 $grid.masonry('destroy');
3 // 原生JS
4 msnry.destroy();

一个栗子:

var masonryOptions = {
  itemSelector: '.grid-item',
  columnWidth: 80
};
// 初始化Masonry
var $grid = $('.grid').masonry( masonryOptions );
var isActive = true;

$('.toggle-button').on( 'click', function() {
  if ( isActive ) {
    $grid.masonry('destroy'); // destroy
  } else {
    $grid.masonry( masonryOptions ); // 重新初始化
  }
  // 设置标记
  isActive = !isActive;
});

getItemElements

返回一个item元素组成的数组

1 // jQuery
2 var elems = $grid.masonry('getItemElements');
3 // 原生JS
4 var elems = msnry.getItemElements();

jQuery.fn.data('masonry')

由一个jQuery对象得到一个Masonry实例。使用Masonry实例可以很方便地获取到Masonry属性

1 var msnry = $('.grid').data('masonry');
2 // 获取Masonry属性
3 console.log( msnry.items.length + ' filtered items'  );

Masonry.data

通过原生对象获取其Masonry实例。对于在HTML中完成Masonry实例初始化的情况,通过Masonry.data()可以方便地获取到 该实例。

var msnry = Masonry.data( element );
  • element 原生元素对象或选择器字符串(原生格式)

获取的例子:

// jQuery
// pass in the element, $element[0], not the jQuery object
var msnry = Masonry.data( $('.grid')[0] );

// 原生JS
// 使用element
var grid = document.querySelector('.grid');
var msnry = Masonry.data( grid );
// 使用选择器字符串
var msnry = Masonry.data('.grid');

 事件

事件绑定

jQuery 事件绑定

用jQuery进行事件绑定,使用.on(),.off()和.one()方法

// jQuery
var $grid = $('.grid').masonry({...});

function onLayout() {
  console.log('layout done');
}
// 绑定事件监听器
$grid.on( 'layoutComplete', onLayout );
// 解绑事件监听器
$grid.off( 'layoutComplete', onLayout );
// 绑定只执行一次的事件监听器
$grid.one( 'layoutComplete', function() {
  console.log('layout done, just this one time');
});

jQuery用于充当事件监听器的回调函数可以接受两个参数,第一个是event,第二个是items,而原生JS则没有第一个参数 ,如:

// jQuery, 有event参数
$grid.on( 'layoutComplete', function( event, items ) {
  console.log( items.length );
});

// 原生JS, 无event参数
msnry.on( 'layoutComplete', function( items ) {
  console.log( items.length );
});

原生JS事件绑定

用原生JS进行事件绑定,使用.on(),.off()和.once()方法

// 原生JS
var msnry = new Masonry( '.grid', {...});

function onLayout() {
  console.log('layout done');
}
// 绑定事件监听器
msnry.on( 'layoutComplete', onLayout );
// 解绑事件监听器
msnry.off( 'layoutComplete', onLayout );
// 绑定只执行一次的事件监听器
msnry.once( 'layoutComplete', function() {
  console.log('layout done, just this one time');
});

Masonry events

layoutComplete

在所有元素重新排列,且过渡动画全部完成后触发

1 // jQuery
2 $grid.on( 'layoutComplete', function( event, laidOutItems ) {...} );
3 // 原生JS
4 msnry.on( 'layoutComplete', function( laidOutItems ) {...} );
  • laidOutItems  Masonry.Items组成的数组· 需要执行排列的元素

一个栗子:

1 $grid.on( 'layoutComplete',
2   function( event, laidOutItems ) {3     console.log( 'Masonry layout completed on ' +
4       laidOutItems.length + ' items' );
5   }
6 );

removeComplete

当元素被移除后触发

1 // jQuery
2 $grid.on( 'removeComplete', function( event, removedItems ) {...} );
3 // 原生JS
4 msnry.on( 'removeComplete', function( removedItems ) {...} );
  • removedItems Masonry.Items组成的数组·  需要执行删除的元素
互联网世界
  • 文本由 发表于 2020年3月11日16:28:57
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
  • 免责声明:文章为作者独立观点,不代表互联网世界立场
    本站网页部分文字及图片来源于网络,如侵犯到您的权益,请及时告知,我们将及时处理或删除。
Web配色基础:色彩设计方法 Web前端

Web配色基础:色彩设计方法

为什么要整理设计色彩方法? 在色彩设计应用中,我们对颜色不同程度的理解,影响到设计页面的表现,熟练地运用色彩搭配,设计时岂不事半功倍。一张优秀的设计作品,它的色彩搭配必定和谐得体,令人赏心悦目,反思我...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: