是开头都会说的原理
瀑布流布局有两种，一种是固定列，一种是非固定列。在此主要记述第一种的实现。
固定列的特征是：无论页面如何缩放，每行的总列数都一致。
一行4列的瀑布流从布局的角度来说，就是4个li标签。通过一定的事件（比如滚动条滚动多少px），然后读取之，再把数据动态地添加到页面中。
添加数据原则，不是根据li索引值来加，而是根据各列中高度最短的的那列动态添加。否则可能导致页面很难看（左右高度不统一）。
实例涉及ajax方法。可在服务器环境下运行。
废话不多说了。直接上样式。
<ul id="ul1">
<li>
<div>
<img src="images/1.jpg">
<p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
</div>
</li>
<li>
<div>
<img src="images/2.jpg">
<p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
</div>
</li>
<li>
<div>
<img src="images/3.jpg">
<p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
</div>
</li>
<li>
<div>
<img src="images/4.jpg">
<p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
</div>
</li>
</ul>css
*{
margin:0;
padding: 0;
}
ul li{
list-style: none;
}
#ul1{
width: 1080px;
margin: 100px auto 0;
}
li{
width: 247px;
float: left;
margin-right: 10px;
}
li div{
border:1px solid #000;padding:10px;
margin-bottom:10px;
}
li div img{
width: 225px;display: block;
}基本效果如图：
样式显示没问题之后，就把li里面的代码删掉。
接下来通过ajax来动态添加。
数据哪里来？
这里用的是wookmark的数据接口。
http://www.wookmark.com/api/json/popular?page=1
点开url得到是一个json。
信息量很大。怎么分析？
一般可以看文档。但是手头没有文档的情况下，可以看看链接。返回是什么鬼。
function createUrl(num){
return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
