使用Isotope排版
Iostope官方網站http://isotope.metafizzy.co/
簡介
Isotope是一個jQuery插件，提供了主要的三種排版功能
Layout modes:
Intelligent, dynamic layouts that can't be achieved
with CSS alone.
Filtering:
Hide and reveal item elements easily with jQuery
selectors.
Sorting:
Re-order item elements with sorting. Sorting data
can be extracted
from just about
Isotope提供許多的排版模式(Layout
Model)，我們在這裡使用預設的masonry模式排版，這個模式下元件會自動(或智能)的垂直排列填滿(Vertical
grid)。
也可以設定columnWidth來控制每個colunm最小的寬度。
$('#container').isotope({
masonry: {
columnWidth: 240
}
});
參數設定
Isotope在使用時有許多的參數可以設定，例如自動縮放大小(ReSize)、動畫模式、要排版元素的Class、過濾器、排序器、排版模式等…
在本原型中比較重要的參數有resizable、itemSelector、fliter這幾項目。
Resizable :
預設值為true，但這邊我們必須將它設定為false，因為如果resizable為true時，頁面縮放及視窗大小改變時，將會造成masonry重新排版，這樣會造成雜誌頁面排版混亂的現象（因為我們有使用自己的排版樣式來做固定區塊的擺設），因此必須將resizable設定為false。
ItemSelector :
指定要被排版的元素，也就是會將我們指定的class(<div class=’element’>)納入isotope排版的功能內，非指定元素將不會被isotope作用。
Fliter:
為一個過濾器，有兩種方法使用，第一種方法比較直觀，也就是直接給他一個CSS Selector(與jQuery方法一樣)來做為過濾的方法，第二種方式為自定義過濾的function，該函式回傳true表示此為將要過濾之元素。
$container.isotope({
resizable : false,
itemSelector : '.element',
masonry: {
columnWidth: 1
}
});
更多的參數說明可參考 : http://isotope.metafizzy.co/docs/options.html
isotope提供方法
Isotope提供了一些方法(Method)提供我們在需要的時候呼叫，使我們可以動態的改變排版、過濾、或是新增刪除元素等。
在本原型中主要使用了新增元素的方法 :
Infinitescroll :
這個功能不是Isotope提供、而是將別人的插件一併引入使使用的插件，提供一個滾輪監聽的方法去讀取下一頁面的資料到Container上。
Appended :
將新元素新增到目前容器的最尾端。
Insert :
這個方法在一般模式下與Append方法雷同，但如果在Sort與Filter模式下，他將會插入該元素到正確的位置上。
Isotope也可以讓我們在動態時呼叫原來的初始函數作為動態畫面的改變，例如點擊過濾寬度為640的按鈕，就是使用isotope({filter: myFilter;})的方式實作。
$('#w640').toggle(function(){
$('#w640').html('顯示全部');
var selector = $(this).attr('data-filter');
$container.isotope({ filter: '.w640' });
},function(){
$('#w640').html('篩選寬640物件');
$container.isotope({ filter: '*' });
});
自定義Pattern
Pattern提供了區塊自我排版的功能，雜誌畫面是使用一塊一塊的版型所排成，因此Pattern可以讓我們自訂某塊版型的各素及排列方式，Pattern也提供版型的轉換(目前是轉為Flip模式)，有這樣的功能就可以實現即時的雜誌-方塊模式轉換。
Pattern提供的參數
container
|
畫面上isotope的container
|
a_type_css
|
圖片影片等A類之css
|
b_type_css
|
文章文字等B類之css
|
flip_css
|
方塊模式時所套用之css
|
a_postion
|
編輯圖片影片等A類出現在樣板的位置編號
|
element
|
將要被排版的元素DOM
|
isFlipMode
|
是否為方塊模式
|
New
a Pattern
Pattern創建的方法，newElements為將要顯示在畫面的元素。
Trigger
Layout
觸發Pattern的appendElements()方法可以將元素加入container中，appendElements也支援參數的傳遞，觸發方塊模式就是使用帶參數的appendElements。
pattern.appendElements(); //使用創建所設定參數方式加入
pattern.appendElements({ // 自定義參數
isFlipMode : true,
flip_css : "w320 h320"
});
注意事項 : 使用appendElements來切換排版版型時(正方<->雜誌)必須在appendElements後呼叫$(“#container”).isotope('reLayout')的方法，讓版面重新的排列。
Follow Me On Twitter Or Facebook
Posts by 奧格士(Augus)
Hi,I my name is Augus. I am a author of this blog.I love blogging and I like to share things which I know.Follow Me On Twitter Or Facebook
