瀑布流图片加载

人盡茶涼 提交于 2020-01-04 11:20:06
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imglist{width: 100%;height: auto;position: relative;}
            .imglist ul{padding:0px;margin:0px auto;position: relative;}
            .imglist ul li{width: 220px;border:1px solid #ccc;padding: 5px;float: left;list-style: none;position: absolute;}
            .imglist ul li img{width: 100%;vertical-align: middle;}
            .more{position: absolute;display: block;width: 100px;height:30px;padding: 5px 10px;background-color: #efefef;color:#333;left: 0px;right:0px;margin: 0px auto;border:none;border-radius: 4px;}
        </style>
    </head>
    <body>
        <div class="imglist">
            <ul id="list">
                
            </ul>
            <button class="more" type="button" style="cursor: pointer;">更多</button>
        </div>
<script>
var loadingfun = {
        //窗口改变重新排版
        changesize:    function(){
                var rowheightagain = this.againsize();
                var moverheight =maxheight(rowheightagain);
                var more = document.getElementsByClassName("more")[0];
                more.style.top = moverheight+"px"; //更多按钮的位置(根据最高列的高度来觉得)
                //获取最高列的高度
                function maxheight(arraymode){
                    var maxval = 0;
                    for(var keys in arraymode){
                        if(arraymode[keys]>maxval){
                            maxval = arraymode[keys];
                        }
                    }
                    return maxval;
                }
        },
        loadingimg:function(){
           var numimg = 10,
               fristnum = 10;//初始加载数据条数
           //初始排版
        (function ajaximg(){
                var litagarray =null,
                     lilength =null,
                     liwidth=null,
                    litagheigh =[],//各个li模块的高度
                    rowheight =[],//各个列的高度
                    row=null,
                    objectresult ="",
                    ullist = null,
                    more = document.getElementsByClassName('more')[0];
                if(window.XMLHttpRequest){
                    xmlhttp =new XMLHttpRequest();
                }else{
                    xmlhttp = new ActiveXObject('Micrsot.XMLHTTP');
                }
            (function readyajax(){
                 xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.status==200&&xmlhttp.readyState==4){
                        var resultdata = eval('('+xmlhttp.responseText+')'),
                        _htmlallli = '',
                        indexnum=0;
                        ullist = document.getElementById('list');
                        objectresult = resultdata.imgdata;
                        datalength = objectresult.length;
                        /*****获取li*****/
                        /**缓存图片并插入,一定要先缓存不然计算不到LI的真是高度**/
                        (function imgload(){
                        var imagesload = new Image();//实例化图片缓存函数
                            imagesload.onload = function(){
                                //如果缓存完图片则获取li并插入
                                if(indexnum==fristnum){
                                    for(var i=0;i<fristnum;i++){
                                        var _htmlli = "<li><a href=''><img src="+objectresult[i].urlimg+" /></a></li>";
                                        _htmlallli +=_htmlli;    
                                    }
                                        /***插入li****/
                                        addhtml(_htmlallli,ullist);
                                        /**定义列数**/
                                        litagarray = ullist.getElementsByTagName('li');//获取li集合
                                        lilength = litagarray.length;//获取li的个数
                                        liwidth = litagarray[0].offsetWidth;//获取li宽度
                                        documentwidth = document.documentElement.offsetWidth;//页面宽度;
                                        row = Math.floor(documentwidth/liwidth);
                                        ullist.style.width = row*liwidth+'px';
                                        /**列数定义完成**/
                                        //获取各个模块的高度
                                        for(var i=0;i<lilength;i++){
                                            litagheigh.push(litagarray[i].offsetHeight);
                                        }
                                        /**初始化第一列的各模块的top与left并获取列的高度**/
                                        for(var i=0;i<row;i++){
                                            litagarray[i].style.top = 0+'px';
                                            litagarray[i].style.left = liwidth*i+'px';
                                            rowheight.push(litagarray[i].offsetHeight);
                                        }
                                        /**插入新的模块,从最短一列开始插入,并更新该列的高度**/
                                        for(var i=row;i<fristnum;i++){
                                        var minindex = minheight(rowheight);//获取最短列的索引
                                            litagarray[i].style.top = rowheight[minindex] +'px';//设置模块的top
                                            litagarray[i].style.left = liwidth*minindex+'px';//设置模块的left
                                            rowheight[minindex] = litagheigh[i]+rowheight[minindex];//更新最短列的高度
                                        }
                                        var thistop = maxheight(rowheight);
                                        more.style.top = thistop +'px';
                                    }else{
                                        imgload()//没有缓存完则继续缓存
                                    }
                            }
                            imagesload.src = objectresult[indexnum].urlimg;//缓存图片
                            indexnum++;
                        })()
                    }
                }
                xmlhttp.open('POST','imgdata.php');
                xmlhttp.setRequestHeader("Content-type","application/json;charset=utf-8");
                xmlhttp.send(null);
            })()
                //点击更多后加载
             more.onclick = function(){
                 var indexnumtwo = fristnum;
                 (function imageloading(){
                     var imagesloadtwo = new Image();//实例化图片缓存函数
                     imagesloadtwo.onload = function(){    
                         if(indexnumtwo==numimg+fristnum){
                             var _htmlalli = '';
                             var rowheightagain = loadingfun.againsize();//这里调用这个主要是在窗口改变的后,再去加载模块需要重新计算列数及列的高度,
                        //判断是否全部已经加载(显示的数据=剩余的数据刚好相等,显示的数据>与剩余的数据,所以遍历的时候要判断i是否超出剩余条数)
                            if(datalength>fristnum){
                                for(var i=fristnum;i<numimg+fristnum;i++){
                                //如果全部显示完则停止遍历跳出循环;
                                if(i>=datalength){ 
                                    break;
                                }
                                var _htmlli = "<li><a href=''><img src="+objectresult[i].urlimg+" /></a></li>";
                                _htmlalli +=_htmlli;
                                }
                                fristnum = numimg+fristnum;
                                var testul = ullist;
                                addhtml(_htmlalli,ullist);
                                var    newlitaglength = litagarray.length;
                                for(var i=lilength;i<newlitaglength;i++){
                                     litagheigh.push(litagarray[i].offsetHeight);//新加载数据个模块的高度;
                                }
                                //插入加载的数据并更新更列的高度与前面的插入一样;
                                for(var i=lilength;i<newlitaglength;i++){
                                    var minkey = minheight(rowheightagain);
                                    litagarray[i].style.top = rowheightagain[minkey]+'px';
                                    litagarray[i].style.left = minkey*liwidth +'px';
                                    rowheightagain[minkey] +=litagheigh[i];
                                }
                                lilength = newlitaglength;
                                var thistop = maxheight(rowheightagain);
                                more.style.top = thistop +'px';
                                }else{
                                    alerts('没有更多了');//如果点击时已经加载完,则弹出
                                }
                         }else{
                             imageloading();
                         }
                     }
                     if(!objectresult[indexnumtwo]){
                         imagesloadtwo.src="img/11.jpg";//无视这个,但是一定要有一个值;
                     }else{
                         imagesloadtwo.src = objectresult[indexnumtwo].urlimg;//缓存图片    
                     }
                    indexnumtwo++;
                 })();
            }
       })();
               //获取最短列的索引
              function  minheight(arraymode){
                   var minval = arraymode[0];
                var minkey = 0;
                for(var keys in arraymode){
                    if(minval>arraymode[keys]){
                        minval = arraymode[keys];
                        minkey = keys;
                    }
                }
                return minkey;
               }
            //获取最高列的的值
             function maxheight(arraymode){
                var maxval = 0;
                for(var keys in arraymode){
                    if(arraymode[keys]>maxval){
                        maxval = arraymode[keys];
                    }
                }
                return maxval;
            }
            //插入html
            function addhtml(elementhtml,elementenode){
                var newdiv = document.createElement('div');
                newdiv.innerHTML = elementhtml;
                takehtml = document.createDocumentFragment();//创建一个虚拟的碎片html片段
                while(newdiv.firstChild){
                    takehtml.appendChild(newdiv.firstChild);//取出div中子元素节点,这里有个有意思的地方就是takehtml每插入一个firstchild,div中便少一个;所以takeli中插入的永远是div的第一个
                }
                return elementenode.appendChild(takehtml);
            }
            //弹出提示信息
             function alerts(texts){
                var alerttext = "<p id='alerttext' style='text-align:center;line-height:80px;position:fixed;left:0px;right:0px;margin:40% auto;z-index:1000;width:200px;height:80px;border-radius:8px;background-color:#000;color:#fff;opacity:0.8;'>"+texts+"</p>"
                  var divalter = document.createElement('div');
                      divalter.innerHTML = alerttext;
                  var    alterremove = document.getElementById('alerttext');
                  var    takediv = document.createDocumentFragment();                  
                      takediv.appendChild(divalter.firstChild);
                      if(!alterremove){//判断是否弹出了信息,没有则显示;
                          document.body.appendChild(takediv);
                          alterremove = document.getElementById('alerttext');
                          setTimeout(function(){
                              document.body.removeChild(alterremove);
                          },2000)
                      }
                      
                 }
        },
    againsize:function(){
            var documentwidthagain = document.documentElement.offsetWidth,//页面宽度
                ullistagain = document.getElementById('list'),
                litagarrayagain = ullistagain.getElementsByTagName('li'),//获取li集合
                lilengthagain = litagarrayagain.length,//获取li的个数
                liwidthagain = litagarrayagain[0].offsetWidth,//获取li宽度
                litagheighagain= [],
                rowagain = Math.floor(documentwidthagain/liwidthagain),//获取列数
                rowheightagain = [],
                result=[documentwidthagain,rowheightagain];
                ullistagain.style.width = rowagain*liwidthagain+'px';//定义ul的宽度(居中时使用)
                //定位出定义行并获取各列的高度
                for(var i=0;i<rowagain;i++){
                    litagarrayagain[i].style.top = 0+"px"; 
                    litagarrayagain[i].style.left = liwidthagain*i+"px";
                    litagheighagain.push(litagarrayagain[i].offsetHeight);
                    rowheightagain.push(litagheighagain[i]);
                }
                //插入剩余的模块(根据最短列来插入)并更新个列的高度
                for(var i=rowagain;i<lilengthagain;i++){
                    litagheighagain.push(litagarrayagain[i].offsetHeight);
                    var minindex = minheight(rowheightagain);
                        litagarrayagain[i].style.top = rowheightagain[minindex]+"px"; 
                        litagarrayagain[i].style.left = liwidthagain*minindex+"px";
                        rowheightagain[minindex] +=litagheighagain[i];
                }
                //获取最短列的索引
                function  minheight(arraymode){
                       var minval = arraymode[0];
                    var minkey = 0;
                    for(var keys in arraymode){
                        if(minval>arraymode[keys]){
                            minval = arraymode[keys];
                            minkey = keys;
                        }
                    }
                    return minkey;
                   }
                return rowheightagain;//返回各列的高度(其他函数使用)
    }
            
}        
              window.onload =function(){
                loadingfun.loadingimg();
            } 
            window.onresize = function(){
                loadingfun.changesize();
            }
</script>
    </body>
</html>

 后台php部分,这里只用到了urlimg,没有用到title

<?php
header("Content-Type:application/json;charset=utf-8"); 
echo("{'imgdata':[
    {'urlimg':'imgdata/1.png','title':'图片一'},
    {'urlimg':'imgdata/2.png','title':'图片二'},
    {'urlimg':'imgdata/3.png','title':'图片三'},
    {'urlimg':'imgdata/4.png','title':'图片四'},
    {'urlimg':'imgdata/5.png','title':'图片五'},
    {'urlimg':'imgdata/6.png','title':'图片六'},
    {'urlimg':'imgdata/7.png','title':'图片七'},
    {'urlimg':'imgdata/8.png','title':'图片八'},
    {'urlimg':'imgdata/9.png','title':'图片九'},
    {'urlimg':'imgdata/10.png','title':'图片十'},
    {'urlimg':'imgdata/11.png','title':'图片十一'},
    {'urlimg':'imgdata/12.png','title':'图片十二'},
    {'urlimg':'imgdata/13.png','title':'图片十三'},
    {'urlimg':'imgdata/14.png','title':'图片十四'},
    {'urlimg':'imgdata/15.png','title':'图片十五'},
    {'urlimg':'imgdata/16.png','title':'图片十六'},
    {'urlimg':'imgdata/17.png','title':'图片十七'},
    {'urlimg':'imgdata/18.png','title':'图片十八'},
    {'urlimg':'imgdata/19.png','title':'图片十九'},
    {'urlimg':'imgdata/18.png','title':'图片十八'},
    {'urlimg':'imgdata/1.png','title':'图片一'},
    {'urlimg':'imgdata/2.png','title':'图片二'},
    {'urlimg':'imgdata/3.png','title':'图片三'},
    {'urlimg':'imgdata/4.png','title':'图片四'},
    {'urlimg':'imgdata/5.png','title':'图片五'},
    {'urlimg':'imgdata/6.png','title':'图片六'},
    {'urlimg':'imgdata/7.png','title':'图片七'},
    {'urlimg':'imgdata/8.png','title':'图片八'},
    {'urlimg':'imgdata/9.png','title':'图片九'},
    {'urlimg':'imgdata/10.png','title':'图片十'},
    {'urlimg':'imgdata/11.png','title':'图片十一'},
    {'urlimg':'imgdata/12.png','title':'图片十二'},
    {'urlimg':'imgdata/13.png','title':'图片十三'},
    {'urlimg':'imgdata/14.png','title':'图片十四'},
    {'urlimg':'imgdata/15.png','title':'图片十五'},
    {'urlimg':'imgdata/16.png','title':'图片十六'},
    {'urlimg':'imgdata/17.png','title':'图片十七'},
    {'urlimg':'imgdata/18.png','title':'图片十八'},
    {'urlimg':'imgdata/19.png','title':'图片十九'},
    {'urlimg':'imgdata/18.png','title':'图片十八'},
    {'urlimg':'imgdata/18.png','title':'图片十八'},
    {'urlimg':'imgdata/19.png','title':'图片十九'},
    {'urlimg':'imgdata/18.png','title':'图片十八'}
]}");
?>

实现效果是这样的,http://www.caicai5.com/sheji/  当然实际情况是要稍加修改的,比如图片间要有间隙,图片加载要有一个提示信息。根据自己的需要修改即可

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!