欢迎访问淘淘IT!QQ:505342486

瀑布流插件Masonry

时间:2020-05-20 15:56:23    来源:网络    浏览:42

CDN

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

HTML

在你的项目中引入Masonry.js

<script src="/path/to/masonry.pkgd.min.js"></script>
Masonry的运行需要一个包含一些列子组件的grid容器标签
<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>
CSS

你可以通过CSS控制所有组件的尺寸

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
通过jQuery初始化

你可以将Masonry作为一个jQuery插件来使用$('selector').masonry()

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});
配置项Options

1,itemSelector 详细介绍>>

用于指定参与布局的子组件。

itemSelector: '.grid-item'
2,columnWidth

设置组件的宽度

columnWidth: 80
3,Gutter

设置组件之间的间距

gutter: 10
使用CSS margin可设置组件的纵向间距
.grid-item {
  margin-bottom: 10px;
}
4,horizontalOrder

使组件水平方向按照从左到右排列

horizontalOrder: true
5,percentPosition

设置组件的位置(尺寸)为百分比而非像素数。percentPosition: true可以使宽度为百分比的组件不改变他们原本的位置。

// set positions with percent values
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'
6,Stamp

指定组件为stamp。Masonry在布局时会避开这些组件。

// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'
7,fitWidth

根据父级容器的尺寸,设置容器的宽,以适应可用的列数。启用之后将容器grid居中

fitWidth: true
8,originLeft

控制水平布局,默认状态下originLeft: true控件从左到右布局,设置originLeft: false后,控件从右向左布局。

originLeft: false
9,originTop

设置originTop: false后,自下而上布局

originTop: false

10,containerStyle

设置父级容器grid的css样式。默认状态下为position:’relative’,禁用grid容器的所有样式:containerStyle:null

// default
// containerStyle: { position: 'relative' }

// disable any styles being set on container
// useful if using absolute position on container
containerStyle: null

11,transitionDuration

控件改变位置或重排的缓动时间。默认为0.4s

// fast transitions
transitionDuration: '0.2s'

// slow transitions
transitionDuration: '0.8s'

// no transitions
transitionDuration: 0
12,stagger


控件重排的时间。当一个控件改变了位置,其他控件逐次的改变位置进行重排,stagger属性即为每个控件发生重排的缓动时间。,默认为值30(毫秒)

stagger: 30
13,resize


当窗口大小改变时控件重排以适应父级容器大小。默认为允许重排resize: true,在v3版本中使用isResizeBound,并在v4版本下兼容。

// disable window resize behavior
resize: false
14,initLayout


允许初始化布局,默认开启。
设置为initLayout: false,可以禁止初始化布局,你可以通过methods或者增加event事件的方法开启布局。V3版本使用isInitLayout。

var $grid = $('.grid').masonry({
  // disable initial layout
  initLayout: false,
  //...
});
// bind event
$grid.masonry( 'on', 'layoutComplete', function() {
  console.log('layout is complete');
});
// trigger initial layout
$grid.masonry();

来源网址:https://segmentfault.com/a/1190000013675077

有帮助
(0)
0%
没帮助
(0)
0%
标签: 瀑布流  masonry  

网友评论

网友评论文明上网理性发言
昵称:

全部评论0条)

o(╯□╰)o 暂无评论,我要抢沙发。
栏目列表
点击排行
more