Masonry - 非常简单实用的瀑布流插件(附实例和中文文档)

admin

38513588-5aa602456a802.png

Masonry简介

Masonry是什么?

Masonry是一个JavaScript网格布局库。它的作用是在可用的竖直空间上将页面元素放置于页面最佳位置处,就像泥瓦匠将石头往墙上砌一样。你应该已经在网上很多地方见过它了。瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。(效果如上图)

官网:

Masonry官方文档

Masonry中文文档

Masonry实例DEMO

下载安装

1,可以从官方网站下载

2,也可以直接在unpkg引用Masonry的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>

基本使用

在你的项目中引入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
});

通过原生JavaScript初始化

你可以通过原生JS使用Masonry:new Masonry(elem,options)。构造函数Masonry()接收两个参数:容器标签和配置对象。

var elem = document.querySelector('.grid');
var msnry = new Masonry(elem,{
// options
itemSelector: '.grid-item',
columnWidth: 200
});
// element argument can be a selector string
//for an individual element
var msnry = new Masonry('.grid',{
// options
});

HTML中初始化

你也可以在HTML中初始化Masonry,这样不需要书写任何JavaScript。在容器标签中增加data-masonry属性,其值则是Masonry组件的配置

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

注意:在HTML中必须以JSON格式配置,key必须带引号,例如:“itemSelector”:。data-masonry的值使用单引号,JSON使用双引号。

在Masonry v3版本,HTML初始化需要使用特定的class: js-masonry,设置配置需要属性data-masonry-options,在Masonry v4之后版本中,这种写法也是兼容的。

<div class=“grid js-masonry”
data-masonry-options='{“itemSelector”:“.grid-item”,“columnWidth”:200 }'>

主要参数

   // options
   itemSelector: '.grid-item', //附加选择器,用来指定哪些元素包裹的元素会重新排列。
   columnWidth: 200, //第1列网格的宽度,单位为像素(px), 默认: 第一个浮动元素外宽度。
   percentPosition:true, //将元素定位设成百分比。true后,元素宽度自动适应容器的尺寸变化。
   gutter: 10, //元素水平方向的间隙
   horizontalOrder: true,
   singleMode: false,//禁用测量每个浮动元素的宽度。如浮动元素具有相同的宽度,设为true。默认 false。
   resizeable: true, // 绑定一个Masonry访问,窗口resize时布局平滑流动。默认:true。
   animate: true, // 布局重排动画。默认:false。
   animationOptions: {}, //一对动画选项,具体参数可以参考jquery .animate()中的options选项。
   appendedContent: $('.new_content'),
   //  附加选择器元素,用来尾部追加内容。
   // 在集成infinitescroll插件的情况下使用。
   saveOptions: true,
   // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项。
   // 默认:true
   stamp:'.grid-stamp',
   // 网格中的固定元素,不会因重新布局改变位置,移动元素填充到固定元素下方
   fitWidth: true, // 设置网格容器宽度等于网格宽度,这样配合css的auto margin实现居中显示
   originLeft: true, // 默认true网格左对齐,设为false变为右对齐
   originTop: true, // 默认true网格对齐顶部,设为false对齐底部
   containerStyle: { position: 'relative' }, // 设置容器样式
   stagger: '0.03s', 
   //重布局时网格并不是一起变换的,排在后面的网格比前一个延迟开始,该项设置延迟时间  
   initLayout: true, //初始化布局,设未true可手动初试化布局
   
isAnimated     使用jquery的布局变化,默认true 
animationOptions     animate属性渐变效果(Object { queue: false, duration: 500 }) 
gutterWidth     列的间隙 Integer 
isFitWidth     自适应浏览器宽度Boolean 
isResizableL     是否可调整大小 Boolean 
isRTL     使用从右到左的布局 Boolean
文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,1522人围观)

还没有评论,来说两句吧...

目录[+]