ccckaass的部落格

 Pinterest 網站

Masonry

想要做出像 Pinterest 一樣的瀑布流頁面，現在有許多套件可以免費使用

其中又以 Masonry 較為多人使用

適用瀑布流的網站主要都是以圖片展示為主，如：拍賣網、時尚流行、攝影紀錄等等

在以 Masonry 來說，套件已提供許多方法及選項可使用，配合自訂的CSS即可達到很好的展示效果

除了 JQuery外，Masonry 也支援使用 vanilla JS

Layout

使用 Masonry 製作瀑布流佈局非常快速，先在html部分建立一個 Div 容器(container) 及包覆項目 Div (item)

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

初始化 Masonry

//選擇外層的div容器
$('.container').masonry({
    itemSelector: '.item',  //選擇要做佈局的項目方塊
    columnWidth: 30,        //網格對齊的寬度 
})

在官方文件中提到，所有的屬性都是自選的，並不一定都要設置。

但官方強烈推薦(建議?) 必須設置   itemSelector   及  columnWidth   兩個參數避免造成版面異常

itemSelector / columnWidth : 除了直接填入數字外，也可以是選擇器或是物件元素，如:

itemSelector: '.item',

或者

$grid.find('.item')[0],

藉由取得該物件的css值來做排列，適用於RWD的設計方式

除了這兩個基本參數外，常用的參數還有:

percentPosition : 是否採用百分比值　(true / false)

gutter ：項目方塊間隔距離

stamp ：指定一個項目元素在固定位置，其他網格在做排列時將會在此項目下做排列

stamp: '.stamp',

isOriginLeft ： 網格項目水平排列方式     true:由左往右     false:由右往左

isOriginTop ： 網格項目垂直排列方式     true:由上往下     false:由下往上

這樣就完成基礎的 Masonry 佈局。

回到頁面重新整理看看吧