怎样在网页中做出瀑布流效果？

　　在网页中实现瀑布流效果方法：

　　1.传统多列浮动

　　各列固定宽度，并且左浮动;

　　一列中的数据块为一组，列中的每个数据块依次排列即可;

　　更多数据加载时，需要分别插入到不同的列上。

　　2. CSS3 定义

　　由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现;

　　#container {

　　-webkit-column-count: 5；

　　/*-webkit-column-gap: 10px；

　　-webkit-column-rule: 5px solid #333；

　　-webkit-column-width: 210px；*/

　　-moz-column-count: 5；

　　/*-moz-column-gap: 20px；

　　-moz-column-rule: 5px solid #333；

　　-moz-column-width: 210px；*/

　　column-count: 5；

　　/*column-gap: 10px；

　　column-rule: 5px solid #333；

　　column-width: 210px；*/

　　}

　　column-count 为列数; column-gap 为每列间隔距离; column-rule 为间隔边线大小; column-width 为每列宽度; 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏; 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏; 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。

　　3.绝对定位

　　可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整。

瀑布流效果

http://www.sucaihuo.com/js/591.html

在原有基础上，远程添加图片

 
     
    Append