ajax加载瀑布流

Posted 2020-07-30

<div class="warp" id="warp">
<ul>
<li></li>
<li style="margin: 0 22px;"></li>
<li></li>
</ul>
<div class="" style="clear: both"></div>
<button id="btn" class="btn">加载更多</button>
</div>

var oLi=document.getElementsByTagName(‘li‘);
        var btn=document.getElementById(‘btn‘);
        var num=3;
        load(num);
        btn.onclick=function(){
            num+=3;
            load(num);
        }
        function load(num){
            $.ajax({
                type:‘get‘,
                url:‘data.php‘,
                success:function(res){
                    res=eval(‘(‘+res+‘)‘);
                    //alert(res);
                    for(var i=num;i<num+6;i++)
                    {
                        var src=res[i].src;
                        var title=res[i].title;
                        var oImg=new Image();
                        oImg.src=src;
                        oImg.onload=function(){
                            oDiv=document.createElement(‘div‘);
                            oA=document.createElement(‘a‘);
                            oP=document.createElement(‘p‘);
                            oDiv.className=‘con‘,
                            oA.href=‘javascript:void(0);‘,
                            oA.innerhtml=title,
                            oP.innerHTML=‘阅读全文‘,
                            oDiv.appendChild(this);
                            oDiv.appendChild(oA);
                            oDiv.appendChild(oP);
                            oLi[getShort()].appendChild(oDiv);
                        }
                    }
                },
            });
        }
        function getShort(){
            var index=0;
            var iH=oLi[index].offsetHeight;
            for(var i=0;i<oLi.length;i++)
            {
                if(oLi[i].offsetHeight<iH)
                {
                    index=i;
                    iH=oLi[index].offsetHeight;
                }
            }
            return index;
        }