国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

瀑布流插件Masonry中文文檔【翻譯】

soasme / 2531人閱讀

摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。

本位為Masonry官方文檔翻譯，原始鏈接

安裝Install 下載

下載壓縮或未壓縮的masonry

masonry.pkgd.min.js （壓縮）

masonry.pkgd.js （未壓縮）

CDN

在unpkg直接飲用Masonry文件。
包管理

使用Bower安裝

bower install masonry --save

使用npm安裝

npm install masonry-layout
入門Getting started HTML

在你的項目中引入Masonry.js

Masonry的運行需要一個包含一些列子組件的grid容器標簽


  
...

  
...

  
...

  ...
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組件的配置

注意：在HTML中必須以JSON格式配置，key必須帶引號，例如："itemSelector":。 data-masonry的值使用單引號，JSON使用雙引號。
在Masonry v3版本，HTML初始化需要使用特定的class： js-masonry ，設置配置需要屬性data-masonry-options，在Masonry v4之后版本中，這種寫法也是兼容的。

布局Layout 組件尺寸

你可以通過CSS控制組件的尺寸

div class="grid">
  

  

  

  ...

.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改變大小事，組件將以百分比的形式響應式布局。


  
  

  

  

  ...

/* 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"
});
必選配置項Recommended

itemSelector
用于指定參與布局的子組件。
我們建議始終設置項，用于區分參組件元素是否參與布局。

itemSelector: ".grid-item"

  
  Static banner

  

  

  ...

columnWidth
用于在水平網格上對齊組件

我們建議設置columnWidth，如果沒有設置columnWidth，Masonry將使用第一個組件的外寬作為默認值。

columnWidth: 80

使用組件尺寸，在響應式布局中獎組件的寬度設置成百分比，設置columnWidth時，將值設置為指定組件選擇器的字符串，即使用該組件的外寬。

div class="grid">
  
  

  

  

  ...

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
// use outer width of grid-sizer for columnWidth
columnWidth: ".grid-sizer",
itemSelector: ".grid-item",
percentPosition: true
布局Layout

組件尺寸Element sizing
尺寸配置項columnWidth和gutter可以可以設置組件的列寬和間距。


  
  

  

  

  ...

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
// use outer width of grid-sizer for columnWidth
columnWidth: ".grid-sizer",
// do not use .grid-sizer in layout
itemSelector: ".grid-item",
percentPosition: true

該配置項可以設置為一個選擇器的字符串或一個元素

// set to a selector string
// first matching element within container element will be used
columnWidth: ".grid-sizer"

// set to an element
columnWidth: $grid.find(".grid-sizer")[0]

組件尺寸允許你使用CSS控制Masonry的布局。這在響應式布局和媒體查詢中非常有用。

/* 3 columns by default */
.grid-sizer { width: 33.333%; }

@media screen and (min-width: 768px) {
  /* 5 columns for larger screens */
  .grid-sizer { width: 20%; }
}

Gutter（間距）

    gutter: 10

在js配置項gutter可以設置組件的橫向間距，使用CSS margin可設置組件的縱向間距。

gutter: 10

css:

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

在響應式布局中使用組件尺寸將寬度設置為百分比時，可以將gutter的值設置為選擇器字符串或者一個元素。


  

  

  

  

  ...

.grid-sizer,
.grid-item { width: 22%; }
.gutter-sizer { width: 4%; }
.grid-item--width2 { width: 48%; }
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
itemSelector: ".grid-item",
percentPosition: true

horizontalOrder
使組件按照從左到右排列。（對比組件們在第二排的排列）

horizontalOrder: true


percentPosition
設置組件的位置（尺寸）為百分比而非像素數。percentPosition: true可以使寬度為百分比的組件不改變他們原本的位置。

// set positions with percent values
percentPosition: true,
columnWidth: ".grid-sizer",
itemSelector: ".grid-item"
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }

Stamp
指定組件為stamp。Masonry在布局時會避開這些組件。
配置項stamp只在Masonry實例第一次初始化完成后黏貼指定組件，但你可以通過stamp method更改后續的stamp布局。


  

  

  

  

  ....

// specify itemSelector so stamps do get laid out
itemSelector: ".grid-item",
// stamp elements
stamp: ".stamp"
/* position stamp elements with CSS */
.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;
}

fitWidth

根據父級容器的尺寸，設置容器的寬，以適應可用的列數。啟用之后將容器grid居中

fitWidth: true
/* center container with CSS */
.grid {
  margin: 0 auto;
}

originLeft
控制水平布局，默認狀態下originLeft: true控件從左到右布局，設置originLeft: false后，控件從右向左布局。
originLeftMasonry v3使用isOriginLeft，在Masonry v4之后isOriginLeft也是被兼容的。

originLeft: false

originTop
類似originLeft，開啟originTop: false后，自下而上布局

設置（Setup）

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

transitionDuration
控件改變位置或重排的緩動時間。默認為0.4s

// fast transitions
transitionDuration: "0.2s"

// slow transitions
transitionDuration: "0.8s"

// no transitions
transitionDuration: 0

stagger
控件重排的時間。當一個控件改變了位置，其他控件逐次的改變位置進行重排，stagger屬性即為每個控件發生重排的緩動時間。，默認為值30（毫秒）

stagger: 30

resize
當窗口大小改變時控件重排以適應父級容器大小。默認為允許重排resize: true，在v3版本中使用isResizeBound，并在v4版本下兼容。

// disable window resize behavior
resize: false
/* grid has fixed width */
.grid {
  width: 320px;
}

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();
方法（Methods）

Methods是Masonry實例的行為
使用jQuery時，methods遵從jQuery格式.masonry( "methodName" /* arguments */ )

$grid.masonry()
  .append( elem )
  .masonry( "appended", elem )
  // layout
  .masonry();

原生JS的method使用類似：masonry.methodName( /* arguments */ )，與jQuery不同，原生JS不能使用鏈（chaining）.

// vanilla JS
var msnry = new Masonry( ".grid", {...});
gridElement.appendChild( elem );
msnry.appended( elem );
msnry.layout();
布局（Layout）

layout / .masonry()
將所有組件布局。layout用于當一個組件改變了尺寸后所有的控件需要重新布局。

// jQuery
$grid.masonry()
// vanilla JS
msnry.layout()
var $grid = $(".grid").masonry({
  columnWidth: 80
});
// change size of item by toggling gigante class
$grid.on( "click", ".grid-item", function() {
  $(this).toggleClass("gigante");
  // trigger layout after item size changes
  $grid.masonry("layout");
});

layoutItems
布局指定控件

// jQuery
$grid.masonry( "layoutItems", items, isStill )
// vanilla JS
msnry.layoutItems( items, isStill )

items Masonry控件的數組
isStill布爾型，禁止變換
stamp
在排列中黏貼指定控件，Masonry會圍繞被黏貼的元素進行排列

// jQuery
$grid.masonry( "stamp", elements )
// vanilla JS
msnry.stamp( elements )

elements element,jQuery對象，節點，或數組
設置不參與瀑布流布局的對象，以選擇器形式給出。

var $grid = $(".grid").masonry({
  // specify itemSelector so stamps do get laid out
  itemSelector: ".grid-item",
  columnWidth: 80
});
var $stamp = $grid.find(".stamp");
var isStamped = false;

$(".stamp-button").on( "click", function() {
  // stamp or unstamp element
  if ( isStamped ) {
    $grid.masonry( "unstamp", $stamp );
  } else {
    $grid.masonry( "stamp", $stamp );
  }
  // trigger layout
  $grid.masonry("layout");
  // set flag
  isStamped = !isStamped;
});

unstamp
解除指定元素的stamp 狀態。

增加&移除控件

Appended
在瀑布流末尾增加新控件并重排。

// jQuery
$grid.masonry( "appended", elements )
// vanilla JS
msnry.appended( elements )

elements element,jQuery對象，節點，或數組

$(".append-button").on( "click", function() {
  // create new item elements
  var $items = $("
...
");
  // append items to grid
  $grid.append( $items )
    // add and lay out newly appended items
    .masonry( "appended", $items );
});

*（注意鏈chaining的使用，此處為先增加節點，再講節點重排）
jQuery可以使用，增加字符串結構的HTML節點，但是masonry不行，所以當時用jQuery ajax動態加載節點時要將HTML節點轉化成jQuery對象。

// does not work
$.get( "page2", function( content ) {
  // HTML string added, but items not added to Masonry
  $grid.append( content ).masonry( "appended", content );
});

// does work
$.get( "page2", function( content ) {
  // wrap content in jQuery object
  var $content = $( content );
  // add jQuery object
  $grid.append( $content ).masonry( "appended", $content );
});

prepended
類似append，在頂部增加新節點并重排。
addItems
項Masonry實例中增加控件元素，addItems不能像append和prepended重排新增加的元素

// jQuery
$grid.masonry( "addItems", elements )
// vanilla JS
msnry.addItems( elements )

remove
從Masonry實例和DOM中移除元素

// jQuery
$grid.masonry( "remove", elements )
// vanilla JS
msnry.remove( elements )
$grid.on( "click", ".grid-item", function() {
  // remove clicked element
  $grid.masonry( "remove", this )
    // layout remaining item elements
    .masonry("layout");
});
事件（Events）

on
增加一個Masonry事件監聽。

// jQuery
var msnry = $grid.masonry( "on", eventName, listener )
// vanilla JS
msnry.on( eventName, listener )

eventName 字符串，Masonry事件名稱
listener 方法
off
移除Masonry事件

// jQuery
var msnry = $grid.masonry( "off", eventName, listener )
// vanilla JS
msnry.off( eventName, listener )

eventName 字符串，Masonry事件名稱
listener 方法
once
增加一個Masonry事件，只觸發一次。

// jQuery
var msnry = $grid.masonry( "once", eventName, listener )
// vanilla JS
msnry.once( eventName, listener )

eventName 字符串，Masonry事件名稱
listener 方法

$grid.masonry( "once", "layoutComplete", function() {
  console.log("layout is complete, just once");
})
Utilities

reloadItems
Recollects all item elements.
For frameworks like Angular and React, reloadItems may be useful to apply changes to the DOM to Masonry.

// jQuery
$grid.masonry("reloadItems")
// vanilla JS
msnry.reloadItems()

destroy
移除所有的Masonry功能，destroy將恢復元素預加載之前的狀態。

// jQuery
$grid.masonry("destroy")
// vanilla JS
msnry.destroy()
var masonryOptions = {
  itemSelector: ".grid-item",
  columnWidth: 80
};
// initialize Masonry
var $grid = $(".grid").masonry( masonryOptions );
var isActive = true;

$(".toggle-button").on( "click", function() {
  if ( isActive ) {
    $grid.masonry("destroy"); // destroy
  } else {
    $grid.masonry( masonryOptions ); // re-initialize
  }
  // set flag
  isActive = !isActive;
});

getItemElements
返回一個組件元素的數組

// jQuery
var elems = $grid.masonry("getItemElements")
// vanilla JS
var elems = msnry.getItemElements()

elems 數組
jQuery.fn.data("masonry")
從jQuery對象中取出Masonry實例，以便讀取Masonry的屬性。

var msnry = $(".grid").data("masonry")
// access Masonry properties
console.log( msnry.items.length + " filtered items"  )

Masonry.data
通過元素取出Masonry實例，Masonry.data()用于從HTML初始化的Masonry實例中取出Masonry屬性。

var msnry = Masonry.data( element )

element 控件或選擇器的字符串
msnry Masonry



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

// vanilla JS
// using an element
var grid = document.querySelector(".grid")
var msnry = Masonry.data( grid )
// using a selector string
var msnry = Masonry.data(".grid")
事件 事件綁定（event binding）

jQuery事件綁定
使用jQuery標準的事件方法綁定，如.on()，.off()和.one()。

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

function onLayout() {
  console.log("layout done");
}
// bind event listener
$grid.on( "layoutComplete", onLayout );
// un-bind event listener
$grid.off( "layoutComplete", onLayout );
// bind event listener to be triggered just once. note ONE not ON
$grid.one( "layoutComplete", function() {
  console.log("layout done, just this one time");
});

jQuery事件監聽器需要一個eventargument參數，原生的JS不需要。

// jQuery, has event argument
$grid.on( "layoutComplete", function( event, items ) {
  console.log( items.length );
});

// vanilla JS, no event argument
msnry.on( "layoutComplete", function( items ) {
  console.log( items.length );
});

原生JS事件綁定
使用原生JS方法綁定。on()，.off()，.once()。

// vanilla JS
var msnry = new Masonry( ".grid", {...});

function onLayout() {
  console.log("layout done");
}
// bind event listener
msnry.on( "layoutComplete", onLayout );
// un-bind event listener
msnry.off( "layoutComplete", onLayout );
// bind event listener to be triggered just once
msnry.once( "layoutComplete", function() {
  console.log("layout done, just this one time");
});
Masonry 事件

layoutComplete
在布局和所有位置變化完成后觸發。

// jQuery
$grid.on( "layoutComplete", function( event, laidOutItems ) {...} )
// vanilla JS
msnry.on( "layoutComplete", function( laidOutItems ) {...} )

laidOutItems Masonry控件數組，已完成排列的控件

$grid.on( "layoutComplete",
  function( event, laidOutItems ) {
    console.log( "Masonry layout completed on " +
      laidOutItems.length + " items" );
  }
);

removeComplete
元素移除后觸發

// jQuery
$grid.on( "removeComplete", function( event, removedItems ) {...} )
// vanilla JS
msnry.on( "removeComplete", function( removedItems ) {...} )

removedItemsMasonry控件數組，被移除的控件

$grid.on( "removeComplete",
  function( event, removedItems ) {
    notify( "Removed " + removedItems.length + " items" );
  }
);

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93359.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<