在 JQuery Mobile 中實現瀑布流圖庫佈局

先來看在Windows系統的1080P顯示器中顯示的效果：

這個整合方式幾乎沒有現存的實例，是本身總結出來的方法，在此記錄下來。

首先訪問Masonry官網下載masonry.pkgd.min.js：http://masonry.desandro.com/

將其整合到項目中，在頁面中引入。

初始化id變量，讓頁面每次加載時的id都不一樣，避免 Ajax 加載時id重複形成難以察覺的錯誤。

var id = "gallerycontent" + Guid.NewGuid();

採用HTML初始化方式進行初始化：

<div id="@id" style="margin: 50px auto;" class="js-masonry" data-masonry-options='{ "isFitWidth": true, "itemSelector": ".post" }'>
....
....
....
</div>

以上爲外部容器代碼。id屬性使用前面的變量；style屬性和後面的isFitWidth選項共同實現了容器自動水平方向居中功能；我沒有像Masonry入門教程那樣指定列寬選項，我以爲貌似對個人項目沒什麼用，經過css盒模型便可較好地控制圖片區塊的列寬和間距。

內部圖片區塊的僞代碼：

<div class="post" style="height:@(260/1.0/image1.寬度*image1.高度)px">
         <a data-ajax="true" href="@image1.大圖地址">
                    <img src="@image1.小圖地址" width="260" />
         </a>
</div>

<div class="post" style="height:@(260/1.0/image2.寬度*image2.高度)px">
         <a data-ajax="true" href="@image2.大圖地址">
                    <img src="@image2.小圖地址" width="260" />
         </a>
</div>

....

....

....

class對應初始化選項裏的itemSelector選項；源圖片尺寸是不規則的，將img的width強制設爲260，這樣圖片的高度會自動等比變化；經我測試，想要正常顯示就必須明確設置每一個區塊的高度，因爲幾乎不作前端開發，對於普通頁面我真不知道怎麼獲取源圖像的尺寸，好在個人項目中圖像的尺寸都在上傳時一併記錄到數據庫中了，這裏只要獲取其尺寸並進行簡單的等比縮放運算，並寫到style屬性中就好了。

css文件中post類的定義：

.post {
    margin: 10px;
    padding: 5px;
    border: solid;
    border-width: 2px;
    border-color: #e4e4e4;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

.post img {
    border: 0;
}

主要就是控制了區塊間距，並模擬了圓角照片效果，呈現效果以下：

至此你就能獲得一個漂亮的瀑布流圖庫頁面了。

可是有一個問題，若是你在頁面切換時使用的 JQuery Mobile 的整頁 Ajax 功能，即將超連接標記的屬性設爲「data-ajax="true"」，那麼在 Ajax 加載後的頁面是不會應用瀑布流效果的。

爲了解決這一問題，我作了很多測試，最終肯定了這樣一個方法：

<script type="text/javascript">
        $(document).on("pagechange", function (event) {
            $("#@id").masonry({
                itemSelector: ".post",
                isFitWidth: true
            });
        });
    </script>

在瀑布流容器的底下加入上面這個JS代碼塊，讓其隨着 Ajax 加載而執行，以註冊pagechange事件，並在事件發生時再初始化瀑布流效果。

pagechange事件是我測試得出的最佳應用時機，過早應用瀑布流效果的話，頁面佈局尚未完成，沒法正確獲取頁面寬度，會致使瀑布流變成一列垂直排下。

可是pagechange事件發生的確實比較晚，Ajax 加載時咱們會清楚地看到圖片區塊先是按沒有佈局修飾的形象顯示出來，而後又變成咱們所須要的瀑布流效果，這是很是糟糕的，爲此咱們對內嵌的JS代碼作出這樣的調整：

$("#@id").fadeTo(0, 0);
        $(document).on("pagechange", function (event) {
            $("#@id").masonry({
                itemSelector: ".post",
                isFitWidth: true
            });
            $("#@id").fadeTo(0, 1);
        });

也就是在加載時先將其不透明度設爲0，在應用了瀑布流以後再將其設回100%，這樣看起來就徹底沒問題了。

至此所有完成。

此瀑布流佈局會隨着窗口尺寸變化而隨時改變，在不一樣尺寸的設備上都有較優的佈局呈現。

 

如下是在同爲1080P分辨率的10寸Android平板上的顯示效果：

如下是在近1080P分辨率（1800*1080）的5寸Android手機屏幕上的顯示效果：