不规则图片瀑布流中图片加载的问题

思路：每次计算最短的li，并将新的图片添加上去

问题图片未加载完，导致计算的最短li误差，见图

解决方法：每次都预先设定好图片的宽和高

img.style.width = '310px';
img.style.height = info[i].height*310/info[i].width+'px';

不规则图片瀑布流代码：

var oul = document.getElementById('oul');
var li = document.getElementsByTagName('li');
var iPage =1;
var b;
function loadPic(){
    aJax({
        method:'get',
        url:'php/getPics.php',
        data:{
            cpage:iPage
        },
        success:function(info){
            var info = JSON.parse(info);

            if(!info.length){
                //后续没有数据了  b没有机会变成true了
                return;
            }
            for(let i=0;i<info.length;i++){
                
                let div = document.createElement('div');
                let p = document.createElement('p');
                p.innerHTML = "1";
                img = document.createElement('img');
                img.src = info[i].image;
                // img.alt = "图片出错了YA";
                img.onerror = 'https://b-ssl.duitang.com/uploads/item/201406/20/20140620141123_vFZJe.thumb.700_0.jpeg';
                img.style.width = '310px';
                img.style.height = info[i].height*310/info[i].width+'px';
                div.appendChild(img);
                div.appendChild(p);
                img.onload =  function(){
                    
                    let index_short = findShortest();
                    li[index_short].appendChild(div);
                }
                
                    
               //所有的img都在最后一个div里  最后有一个1
               //猜测：img.onload加载较慢 在for循环结束之后才执行
                
            }
            b=true;
            //找到li里面最短的一个
            function findShortest(){
                var long = li[0].offsetHeight;
                var index =0;

                for(var i=0;i<li.length;i++){
                    if(li[i].offsetHeight < long){
                        long = li[i].offsetHeight;
                        index = i;
                    } 
                }
                return index;
            }

        },
        fail:function(){}
    });
}
loadPic();
document.onmousewheel = function(){         
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop
    if( scrollH + document.documentElement.clientHeight >= oul.offsetHeight + oul.offsetTop){
        
        if(b){
            //一页的数据加载完成之后再加载下一页 开关在for循环结束
            iPage ++;
            loadPic();
            b=false;
        }
        
    }
}