}
$(function(){
$.getJSON(createUrl(1),function(data){
console.log(data);
})
})
控制台打印结果为：
原来是一个50个图片信息组成的数组。每个数组元素都是一个json。在这个简单的demo里面，暂时只需要取preview属性和title属性就好了。
布局实现
关键之一在于，判断最短的li,事实上我们需要最短高度li的索引值。
//找出高度最小li的索引值
function getShortestLi(){
var shortest=0;
for(var i=1;i<4;i++){
if($('li').eq(i).height()<$('li').eq(shortest).height()){
shortest=i;
}
}
return shortest;
}然后就是getJSON方法
$(function(){
$.getJSON(createUrl(1),function(data){
//console.log(data);
for(var i=0;i<dataArr.length;i++){
var $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>');
//console.log($('li').eq(getShortestLi()).height())
$('li').eq(getShortestLi()).append($html);
};
console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
})
})再加载看看，布局就出来了。简单又漂亮。
做到这里，看起来一切都挺好。然而潜伏着一个致命的问题。
for循环惹的祸？
看看console.log的信息。为了分析，我把4个li的高度放进了一个数组：
50张图片分4列，少说平均高度也得有三四千像素。
而到循环结束，程序判断的终点竟然只有令人发指的1000多个px，因为图片加载过程慢于for循环执行速度。虽然demo里的显示还算正常，但这种代码在网速不好时，会造成工作事故。
思路一：可以判断图片是否加载完成。
可以用个定时器监听下,然后用递归实现，我的方案是这样
var index=0;
function LoadPic(index){
var $html=$('<div><img src="'+data[index].preview+'"><p>'+data[index].title+'</p></div>')
$('li').eq(getShortestLi()).append($html);
var oImg=$html.find('img');
var t=setInterval(function(){
if(oImg.height()!=0){//如果加载完了。
clearInterval(t);
//console.log([$('li').eq(0).height(),$('li').eq(1).height(),$('li').eq(2).height(),$('li').eq(3).height()])
if(index<50){
return LoadPic(index+1);
