Bootstrap照片的瀑布流實現

瀑布流是我們在網站建設中經常需要實現的佈局，好在一個非常好用的第三方外掛 — Masonry已經為我們實現了。

以下是Masonry中引數的所代表的意義：

引數

itemSelector(必須)：

指定在佈局中的哪些子元素會被使用

columnWidth(必須)：

用來對其元素和網路，如果沒有寫，那麼會自動選擇第一個元素的width作為columnWidth

無論是使用確切畫素還是使用百分百，寬應該是成倍數遞增的關係：

.grid-item {
    width:100px
}

.grid-item2 {
    width
 
:200px
}

.grid-item3 {
    width:300px
}

/* 或者 */

.grid-sizer,
.grid-item {
    width:20%
}

.grid-item2 {
    width:40%
}

.grid-item3 {
    width:60%
}

/* 使用百分比，則需要新增引數：percentPosition：true */

gutter

水平方向上，兩個元素值之間的間隔

如果使用了百分比，則需要：

css檔案中：

.gutter-sizer {
    width:4%
}

js中：

gutter:'.gutter-sizer'
 

如果你要垂直方向的間隔，可以直接在css中設定 margin-botton: 10px 類似

horizontalOrder

排列的時候儘可能的水平方向有序

percentPosition

當用百分比設定了寬度的時候使用

stamp

佔位，不會在此區域內排列

<div class='stamp'></div>

stamp:'.stamp'

fitwidth

這個選項是可以將作為container父容器寬度，與元素列數適應的選項

當只用一列時，父容器的寬度也只有一列，擴充套件到兩個元素的時候，父容器寬度就是兩列

要使用fitWidth,就不能使用百分比寬度，否則子元素之間會互相重疊

需要將父容器內部居中

.grid {
    margin:0 auto
}

js檔案設定相關

fitWidth: true

originTop / originLeft

預設是從上到下，從左到右邊，排列的，通過這兩個選項，選擇排列的方向

containerStyle

可以清除父容器的樣式

containerStyle: null

transitionDuration

css 動畫的載入時間

stagger

我們可以看到，在item大小變化的重排的過程中，每一個item的移動之間的世家是錯開的，stagger就是設定這個錯開的時間

stage: 30 // 30毫秒 

resize

可以通過設定 resize 為 false，來禁止window大小改變時，item大小的改變

initLayout

為了在初始化之前使用方法和事件，你需要設定 initLayout:false

其他輔助外掛

在瀏覽的時候，有些圖片可能載入不出來，所以需要imagesLoaded來探測圖片是否載入，只有載入好了才進行佈局

只有當圖片出現在螢幕，我們才進行圖片的載入，這樣可以節約記憶體

我自己搭建的blog網站就用到了上面的知識，歡迎參觀