用到的插件：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{ 80%; margin:auto; }
//设置瀑布流的宽度和位置
.waterfall{ padding:1em 0; 100%;}
//决定一行放多少个
.waterfall .list-group{ margin-right:20px; 31%;}
//我发现这个瀑布流分为上下两块，上面那一块放图片，下面那一块放文字，
//可以决定上半块的高度，个人建议不要修改，因为我试了试，它会根据图片的宽高进行自适应修改，所以我们可以去改图片的宽高
.waterfall .list-group>li:first-child{ padding:0; backgroud-color:white;}
.waterfall .list-group>li:first-child img{ 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>
最后：上图！！！（如果有遇到要用的，而使用我的代码没有成功的，请不要沉默，欢迎打扰
