首先简单的html：

<ul id="wrap"></ul>

里面的模块君由js自动生成；

css内容：

*{padding:0;margin:0;}

#wrap li{width:250px;float:left;list-style:none;}

.boxCont{position:relative;margin:15px;border:1px solid #ccc;background:#eee;}

js内容：

1.因为瀑布流的列是根据浏览器的大小而确定的，所有首先需要确定瀑布流中的内容能生成几列；

2.确定列以后，首先布局第一行内容，均是浮动解决

3. 第一行内容确定后，开始计算第一行那一块最短，将排在第二行的第一块内容排在第一行最短的块下面，后面一次计算均是排在最短的一块下面；

 

详细代码：

var $id = function(o){ return document.getElementById(o) || o};

function sort(el){

        var h = [];

        var box = el.getElementsByTagName("li"); //所有瀑布Pin的集合

        var minH = box[0].offsetHeight,  //第一个Pin的高度

        boxW = box[0].offsetWidth, //因为等宽，第一个也是所有Pin的宽度

        boxH,

        n = document.documentElement.offsetWidth / boxW | 0;  //计算页面能排下多少列Pin

        el.style.width = n * boxW + "px";  //ul的宽度

        for(var i = 0; i < box.length; i++) {

                boxh = box[i].offsetHeight; //获取每个Pin的高度

                if(i < n) { //第一行Pin以浮动排列，不需绝对定位

                        h[i] = boxh;

                        box[i].style.position = '';

                } else {

                        minH = Math.min.apply({},h); //取得各列累计高度最低的一列

                        minKey = getarraykey(h, minH);

                        h[minKey] += boxh ; //加上新高度后更新高度值

                        box[i].style.position = 'absolute';

                        box[i].style.top = minH + 'px';

                        box[i].style.left = (minKey * boxW) + 'px';

                }

        }

};

/* 返回数组中某一值的对应项数 */

function getarraykey(s, v) {

        for(k in s) {

                if(s[k] == v) {

                        return k;

                }

        }

};

/* 随机创建Pin */

var pin = '';

for(i = 0; i < 30; i++) {

        height = Math.floor(Math.random()*200 + 200);

        pin += '<li><div class="boxCont" style="height:' + height + 'px;">'+i+'</div></li>';//这里生成的Pin高度是随机的，在传入需要的元素时，可以设置规则传入指定的高度