<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/+nwbuJpc.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/qymffF.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/DvKZdxCjtfqMv.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/SOmyOQZtlUfdzdjefXwi.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/REsUNXUvAkrdzdj.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/DQJwrFnDpgtdz.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/eJupzWlGPxz.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/IWpjipjp.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/OXsDgKacJeTdzdjefXwi.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/QPIzxiMkmlHdzdjefX.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/mrTNaJTaQyluZyLvvnWS.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/mqXLNuWiPrbdz.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/MiEJRJdimxPdzdjefXw.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/CczowVxqM.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/rabGVkIGq.jpg"></a>
<h3>图片标题</h3>
</li>
<li><a href="/"><img src="/demo/waterfall/zwPqjasxHYvdz.jpg"></a>
<h3>图片标题</h3>
</li>
</ul>
<script>
/*
原理：
1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.计算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
*/
var margin = 10;//这里设置间距
var li=$("li");//这里是区块名称
var li_W = li[0].offsetWidth+margin;
//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
