BootStrap + 流瀑設計 ...

套用BootStrap的版型設計優點在於可支援RWD的設計，不過使用時發現若干客戶所上傳的圖片長寬比例不一，難以嚴格規範(要透過程式來裁切至合適比例但客戶又OOXX)，因此造成版面檢視上無法對齊有留白空格情況發生，所以要加上流瀑設計感覺就好多了。

1. 下載 masonry.pkgd.js，也可以使用mini版...

2.  在頁面加上以下的JavaScript，放置在$(windows).load(){}而不放在$(document).ready(){}下，其原因在於BootStrap設計的 class="img-responsive"，這CSS會在$(document).ready()觸發後才啟動，所以頁面呈現會有重疊的情況發生。

$(window).load(function() {
  function masonry() {
    //masonry
var container = document.querySelector('.js-masonry');
var msnry = new Masonry( container, {
 percentPosition: true,
 itemSelector: '.grid-item'
});
  };

  masonry();
});

3. 套用處...
 <div class="row js-masonry" >
  <div class="grid-item col-md-4 col-sm-6 ">
    ...
  </div>
</div>

後記:在Chrome, FireFox, IE 環境運行完美，不過跟Opera就悲劇ㄌ...