类似与人人网的探索模块、还有微博等这种瀑布流的布局效果，其实可以用简单的jquery实现

1、首先在页面中创建4列div，表示4列“流”，代码：

<div id="wish_body" class="body">
	<div id="wish_body_1" class="column"></div>
	<div id="wish_body_2" class="column"></div>
	<div id="wish_body_3" class="column"></div>
	<div id="wish_body_4" class="column"></div>
	<!-- 清除浮动，自动div高度自动增加 -->
	<div class="clear"></div>
</div>

2、然后用jquery加载数据，代码：

// first load wish
// 打开时自动加载几列数据
$.post('commons/action.php?action=loadWishes',{
	num : num,	//加载数量
	page : page	//加载页数
},function(data){
	var arr = $.parseJSON(data);
	// 调用方法，把获取的数据添加到页面中
	addWishToBody(arr);
});

3、把加载的数据添加到页面中，代码：

/*
	add wish to body
	params arr
*/
function addWishToBody(arr){
	// 页面中共4列，默认添加到第1列
	var column = 1;
	// 遍历加载的数据，添加到页面
	for (var i = arr.length - 1; i >= 0; i--) {
		// getShorterColumn()该方法计算四列中较短的那列，然后在该列中添加数据
		column = getShorterColumn() + 1;
		var wish = arr[i];
		id = wish.id;
		var div_wish = "<div id='"+id+"' class='wish'>"+
			"<div class='title'>"+wish.title+"</div>"+
			"<div class='content'><a>"+wish.text+"</a></div>"+
			"<div class='author'><img src='"+wish.gif+"' width = 200></div>"+
			"<div class='time'>"+wish.author +"发表于"+ wish.createtime+"</div></div>";

		$("#wish_body_"+column).append(div_wish);
	};

}

4、计算4列中较短列，代码：

/*
	get the shorter column
*/
function getShorterColumn(){
	var wish_body_1 = $("#wish_body_1").height();
	var wish_body_2 = $("#wish_body_2").height();
	var wish_body_3 = $("#wish_body_3").height();
	var wish_body_4 = $("#wish_body_4").height();

	var array = [wish_body_1,wish_body_2,wish_body_3,wish_body_4];

	var shorter = array[0];
	var index = 0;
	for (var i = 1; i < array.length; i++) {
		if(array[i] < shorter){
			shorter = array[i];
			index = i;
		}
	};

	return index;
		
}