用到的插件：bootstrap-waterfall.js （bootstrap的瀑布流插件----基於jquery）
可以直接拿着試一試，我會在最下面放上效果圖的
好了：下面我就把我總結的干貨拿出來
只談瀑布流的話：
1.引入css樣式 ------------------------>bootstrap.min.css
例子：<link rel="stylesheet" href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
然后是<style>中的內容,
<style>
//這里的80%是相對於body的，當然了，你可以再在外面套一層div，設置固定的寬度，都可以，視情況而定
.main{ width:80%; margin:auto; }
//設置瀑布流的寬度和位置
.waterfall{ padding:1em 0; width:100%;}
//決定一行放多少個
.waterfall .list-group{ margin-right:20px; width:31%;}
//我發現這個瀑布流分為上下兩塊，上面那一塊放圖片，下面那一塊放文字，
//可以決定上半塊的高度，個人建議不要修改，因為我試了試，它會根據圖片的寬高進行自適應修改，所以我們可以去改圖片的寬高
.waterfall .list-group>li:first-child{ padding:0; backgroud-color:white;}
.waterfall .list-group>li:first-child img{ width:100%;border-top-right-radius:4px; border-top-left-radius:4px;}
.waterfall .list-group>li{ background-color:#f5f5f5;}
</style>
再然后是dom節點內容
<body>
<div class='main'>
<div class='waterfall'></div>
</div>
//在這里寫js腳本
//首先我們要引入jquery的js 和 bootstrap-waterfall的js文件 bootstrap-waterfall.js 路徑是我自己的；
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="css/bootstrap-3.3.7-dist/js/bootstrap-waterfall.js"></script>
//定義瀑布流中的內容
<script id="waterfall-template" type="text/template">
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="img/experience/a1.png" />
</a>
</li>
<li class="list-group-item">
<div class="media-body">
<h3 class="media-heading">Example 1</h3>
<span style="font-size:18px">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit.Eveniet,eius, asperiores. Incidunt sapiente est
quae iure..Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eveniet, eius, asperiores. Incidunt
sapiente est quae iure..
</span>
</div>
</li>
</ul>
</script>
//還有重要的一步呢！
<script>
$('.waterfall').data('bootstrap-waterfall-template', $('#waterfall-template').html()).waterfall();
</script>
</body>
最后：上圖！！！（如果有遇到要用的，而使用我的代碼沒有成功的，請不要沉默，歡迎打擾
