[JQuery] 簡易似jquery BlockUI onOverlayClick 事件

小緋最近功能上的需求，
再一個擬pop div的視窗進行overlay click event

小弟以blockUI demo 製作一個示意圖:

以blockUI Demo 為例，但呈現方式並不像blockUI使用的是同層級的處理，
主要overlay的部份為 parent 視窗，而內容頁面為children頁面

因為父子皆為同層，所以無法直接透過 parent click event 進行處理，因為點選 children 區塊， parent click event 還是會觸發。

所以需要進行區分 overlay 與 content 相異判斷，後來找到了答案，就是 hover，以子層 hover 來決定要不要進行處理，所以最後 code 如下:

$('parent').click(function(){
    if(!$('children').is(':hover')){
        //do something
    }
})

透過這種方式，就可以清楚判定滑鼠點擊的是 overlay 還是 content，那自然可以在裡面加上移除html code 或 hidden 的處理，在使用上就可以類似 unBlockUI處理了。

[JQuery Masonry] 輕鬆佈置瀑布流

JQuery Masonry : http://masonry.desandro.com/
這是一個可以幫您快速建置瀑布流呈現的套件

以 pinterest 為例

瀑布流佈景可分為佈景主框跟項目

佈置方式就如以下code:
<div id='container'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    ...
</div>

然後載入masonry js套件，使用jquery 1.6 之後的版本

在 item css 設定上需要設定 float 的設定

如:
<style>
.item {
    float: left;
}
</style>

然後於js 呼叫 masonry function

$('#container').masonry({
    itemSelector : '.item' < 項目選擇主要針對你設定的 class name 進行選擇
})

這樣即可製作出瀑布流佈景

如要在已有佈景內加入新項目，可以透過 masonry 的 appended 方法

var $obj = (jquery 物件)
$('#container').append( $obj ).masonry( 'appended', $obj );

如要在已有佈景，重新排版，可以透過 masonry 的 reload 方法

$('#container').masonry('reload')

想知道更詳細的教學可以至 masonry 官網相關資訊