最近在用bootstrap寫一個網站，其中有個圖文展示的頁面要用到瀑布流的效果。
因為項目要求，項目要以bootstrap為基准，不准私自添加內聯樣式、內部樣式，所以，自己寫瀑布流就不行了，所以，根據要求，百度查找相關資料，看到masonry.js.
個人認為這是一個非常好用的瀑布流插件。
下面說一下我在引用的過程中遇到的問題，一開始我用bootstrap柵格系統布局，代碼如下
<div class="row masonry">
<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
圖文展示
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 item">
<div class="thumbnail">
<div>
圖文展示
</div>
</div>
..........(省略n多圖文展示)
</div>
引入masonry.js
<script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js" ></script>
<!--瀑布流-->
<script>
$('.masonry').masonry({
itemSelector: '.item'
});
</script>
本以為會有一個滿意的結果，但是，萬萬沒想到，萬萬沒想到，圖文展示錯亂，重疊..這里我就不上圖了，太渣。
后來對照masonry.js的相關文檔看了一下，才知道，還要引入imagesLoaded.js。
因為圖片沒有加載出來時，會影響它的布局，導致瀑布流布局錯誤。我是這樣理解的。如果理解錯了，各位使勁吐槽我。
所以，最后再引入imagesLoaded.js
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js" ></script>
最終調整代碼為：
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js" ></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js" ></script>
<!--瀑布流-->
<script>
<span style="white-space:pre"> </span>$('.masonry').imagesLoaded(function() {
$('.masonry').masonry({
itemSelector: '.item'
});
});
</script>
最后，結果完美。