瀑布流插件Masonry中文文档【翻译】_前端开发 - SegmentFault 思否-前端开发-郭俊杰的知识库

本位为Masonry官方文档翻译，原始链接

安装Install

下载

下载压缩或未压缩的masonry

masonry.pkgd.min.js （压缩）
masonry.pkgd.js （未压缩）

CDN

在unpkg直接饮用Masonry文件。

<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>

包管理

使用Bower安装

bower install masonry --save

使用npm安装

npm install masonry-layout

入门Getting started

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
});

通过原生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 }'>

布局Layout

组件尺寸

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

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

.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; }

响应式布局

组件的尺寸可设置成百分比从而适应响应式的布局，在设置masonry布局模式时，将columnWidth设置为指定组件的尺寸，设置percentPosition: true 。组件的位置将不再改变，window改变大小事，组件将以百分比的形式响应式布局。

<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>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true
})

imagesLoaded

Masonry排列未加载完成的图片时会导致元素的重叠，imagesLoaded可以解决这个问题。imagesLoaded是一个独立的脚本插件，你可以在imagesloaded.desandro.com下载。
初始化Masonry，在每一张图片加载完成后触发布局。

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

或者在所有图片都加载完成后初始化Masonry

var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
});

配置项Options

除了columnWidth和itemSelector以外，所有的配置项都是可以选择的。

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

// vanilla JS （原生JS）
var msnry = new Masonry( '.grid', {
  columnWidth: 200,
  itemSelector: '.grid-item'
});

我是 PHP 程序员