jquery动态生成瀑布流内容重叠问题

在写瀑布流的时候遇到了一个坑，我这个瀑布流的单个内容块是从后台获取的数据，因此需要动态创建元素，大概生成的动态元素是这样的：

<div>
	<img src="url"/>
	<p>texttexttext...</p>
</div>

因为其中含有动态生成的img，所以很容易出现问题：许多内容块折叠在一起，即使设置了margin也不能解决问题（除非你把margin设置的特别大，但是对于那些不包含img的div来说就会间距很大）。最终发现问题所在：用jQuery获取动态生成img元素的高度为0！

这样的话，就需要等到图片完全加载完成才能调用height()或者outerHeight()等相关函数获取div的高度，这时候代码编写的顺序就要格外注意：

//动态创建元素，注意只是创建还没有append到body上
var ele=createEle();

//图片加载完成后再append到body上
	/*判断图片加载完成的代码
	$('img').load(function(){});
	如果是在瀑布流中，格外要注意，不是等待所有图片加载完成
	再获取宽高，而是等待当前要append的div下的img加载完成
	ele.children().find('img').load(function(){}); */
	
//在load函数中需要实现的内容
//这里很重要，一定要在这里获取高度最小的一列（如果使用贪心算法的话），因为load方法是异步加载，会比其他同步方法更晚执行，所以如果在load之外获取最小列始终会得到0。
getMinColumn();
//然后再append到body上，这里顺序很重要
$("body").append(ele);
//一定要append之后再获取宽高
ele.height(); ele.width()
//然后根据瀑布流的规则设置top,left属性即可
ele.css({"top":.... ; "left":......});

其中重点在于判断图片加载完成，以及加载之后执行任务的顺序。