先來看在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手機屏幕上的顯示效果：

轉載于:https://www.cnblogs.com/SkyD/p/3985976.html

總結

以上是生活随笔為你收集整理的在 JQuery Mobile 中实现瀑布流图库布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。