<gallery class="gallery">
    <div id="mainbox" class="main-box"></div>
    <script type="text/javascript">
    function loadXMLDoc(xmlUrl)
    {
        //Internet Explorer
        try {
            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        } catch(e) {
            //Firefox, Mozilla, Opera, etc.
            try {
                xmlDoc=document.implementation.createDocument("","",null);
            } catch(e) {
                alert(e.message)
            }
        }
        try {
            xmlDoc.async=false;
            xmlDoc.load(xmlUrl);
        }
        catch(e)
        {
            //Google Chrome  
            try {
                var chromeXml = new XMLHttpRequest();
                chromeXml.open("GET", xmlUrl, false);
                chromeXml.send(null);
                xmlDoc = chromeXml.responseXML.documentElement;
            } catch(e) {  
                alert(e.message)  
            }
        }
        return xmlDoc;
    }

    function getImgTitleHtmlText(xmlLink, title) {
        htmlText = "<button class=gallery-title style=background:url(" + 
            xmlLink + '/' + title + "cover.jpg"+");><span style=display:inline;><strong style=color:#fff; >" + 
            title.substring(0, title.length - 1) + "</strong></span></button>";
        return htmlText;
    }

    function getImgBoxHtmlText(imgClass, imgId, xmlLink, title, con) {
        htmlText = "<div class=" + imgClass + " id=imgbox><img id=" + imgId +
            " class=imgitem src=" + xmlLink + title + con + " alt=" + con + "></div>";
        return htmlText;
    }

    // 腾讯云存储桶访问链接
    var xmlLink="<%= theme.tencent_cos_url %>";
    xmlDoc=loadXMLDoc(xmlLink);
    var urls = xmlDoc.getElementsByTagName('Key');
    var date = xmlDoc.getElementsByTagName('LastModified');
    var mainbox = document.getElementById('mainbox');
    var content = new Array();
    var index1 = -1;
    var index2 = 0;
    var pageTitle = "<%= page.title %>";
    for (var i = 0; i < urls.length; i++) {
        var bucket = urls[i].innerHTML;
        var length = bucket.indexOf('/');
        if (bucket.indexOf(pageTitle) != -1) {
            if (length === bucket.length - 1) {
                index1++;
                content[index1] = new Array();
                content[index1][0]={'url':bucket,'date':date[i].innerHTML.substring(0,10)};
                index2 = 1;
            } else {
                content[index1][index2++]={'url':bucket.substring(length+1),'date':date[i].innerHTML.substring(0,10)};
            }
        }
    }
    
    var imgId = 0;
    var minWidth = 350;
    var midWidth = 700;
    var colCount = 3;
    var curObj = null;
    var curIndex = 0;
    var curId = 0;
    var curCnt = 0;
    for (var i = 0; i < content.length; i++) {
        var conBox=document.createElement("div");
        conBox.id='conBox' + i;
        conBox.className="con-box";
        mainbox.appendChild(conBox);
        var item=document.createElement("div");
        var title=content[i][0].url;
        item.innerHTML = getImgTitleHtmlText(xmlLink, title);
        conBox.appendChild(item);
        // 计算子框个数，用于实现按列 float
        if (window.innerWidth > midWidth) {
            colCount = 3;
        } else if (window.innerWidth < minWidth) {
            colCount = 1;
        } else {
            colCount = 2;
        }
        // 计算每个相册一次展示多少照片
        var showCnt = colCount * 3;
        var subBoxes = new Array();
        for (var c = 0; c < colCount; c++) {
            subBoxes[c] = document.createElement("div");
            subBoxes[c].id = 'subBox' + c;
            subBoxes[c].className = "sub-box" + colCount;
            conBox.appendChild(subBoxes[c]);
        }
        var extLen = 4;
        for (var j = 1; j < content[i].length && j < showCnt + 1; j++) {
            var con = content[i][j].url;
            var item = document.createElement("li");
            var index = (j - 1)%colCount;
            var imgClass = "imgbox" + index;
            item.innerHTML = getImgBoxHtmlText(imgClass, imgId, xmlLink, title, con);
            subBoxes[index].appendChild(item);
            regViewEvent(item, imgId);
            console.log("imgId: " + imgId);
            imgId++;
        }

        if (content[i].length > showCnt) {
            var moreItem=document.createElement("button");
            moreItem.className="btn-more-posts";
            moreItem.id = "more" + i;
            moreItem.value = showCnt + 1;
            curObj = moreItem;
            curIndex = i;
            curId = imgId;
            curCnt = showCnt;
            moreItem.onclick = function () {
                moreClick(this, content[curIndex], content[curIndex][0].url, curId, curCnt);
            }
            moreItem.innerHTML="<strong>More...</strong>";
            conBox.appendChild(moreItem);
            imgId += (content[i].length - showCnt - 1);
        } else {
            var endItem = document.createElement("button");
            endItem.className="btn-end-posts";
            endItem.id = "end" + i;
            endItem.innerHTML="----------END----------";
            conBox.appendChild(endItem);
        }
    }

    function getScrollTop(){
	    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
	    if(document.body){
	        bodyScrollTop = document.body.scrollTop;
	    }
	    if(document.documentElement){
	        documentScrollTop = document.documentElement.scrollTop;
	    }
	    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
	    return scrollTop;
	}

	//文档的总高度
	function getScrollHeight(){
	    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
	    if(document.body){
	        bodyScrollHeight = document.body.scrollHeight;
	    }
	    if(document.documentElement){
	        documentScrollHeight = document.documentElement.scrollHeight;
	    }
	    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
	    return scrollHeight;
	}

	//浏览器视口的高度
	function getWindowHeight(){
	    var windowHeight = 0;
	    if(document.compatMode == "CSS1Compat"){
	        windowHeight = document.documentElement.clientHeight;
	    }else{
	        windowHeight = document.body.clientHeight;
	    }
	    return windowHeight;
	}

    // 窗口滚动事件
	window.onscroll = function() {
	    if(getScrollTop() + getWindowHeight() >= getScrollHeight() - 1) {
            console.log("onscroll: " + getScrollTop() + ", " + getWindowHeight() + ", " + getScrollHeight());
            moreClick(curObj, content[curIndex], content[curIndex][0].url, curId, curCnt);
	    }
	};
    
    function moreClick(obj, cont, title, curId, curCnt) {
        var parent = obj.parentNode;
        if (parent == null) {
            return;
        }
        parent.removeChild(obj);
        var begin = obj.value;
        console.log("curCnt: " + curCnt);
        console.log("begin: " + begin);
        for (var j = begin; j < cont.length && j < Number(curCnt) + Number(begin); j++) {
            var con = cont[j].url;
            var item = document.createElement("li");
            var index = (j - 1) % colCount + 1;
            var imgClass = "imgbox" + (index - 1);
            item.innerHTML = getImgBoxHtmlText(imgClass, imgId, xmlLink, title, con);
            parent.childNodes[index].appendChild(item);
            regViewEvent(item, curId);
            console.log("curId: " + curId);
            curId++;
        }
        if (cont.length > j) {
            obj.value=j;
            parent.appendChild(obj);
        } else {
            var endItem = document.createElement("button");
            endItem.className="btn-end-posts";
            endItem.id = "end" + curId;
            endItem.innerHTML="----------END----------";
            parent.appendChild(endItem);
        }
    }
    
    function regViewEvent(imgItem, curId) {
        var v = imgItem.getElementsByTagName('img');
        v[0].id = curId;
        v[0].addEventListener("click",function(e){ // 注册事件
            // 记录小图的位置和大小
            x=e.target.offsetLeft;
            y=e.target.offsetTop;
            w=e.target.offsetWidth;
            h=e.target.offsetHeight;
            src=e.target.src;
            id=e.target.id;
            // 创建遮罩层
            div=document.createElement("div");
            div.style.cssText=`
                position:fixed;
                left:0;
                top:0;
                bottom:0;
                right:0;
                background-color: rgba(25,25,25,0.8);
                z-index:99999999;
                transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
                `;
            document.body.appendChild(div);
            setTimeout(function(){
                div.style.opacity=1;
            },0);
            // (此处可以加loading)
            // 创建副本
            img = new Image();
            btnRight=document.createElement("button");
            btnLeft=document.createElement("button");
            img.src=src;
            btnLeft.style.cssText=`
                position:fixed;
                border-radius: 50%;
                margin-top: -25px;
                margin-left: 100px;
                left:${x - 20}px;
                top:50px;
                width:50px;
                height:50px;
                border: 0px;
                background-color: rgba(200,200,200,0.8);
                font-size: 20px;
                z-index: 999999999;
                transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
                `;
            btnRight.style.cssText=`
                position:fixed;
                border-radius: 50%;
                margin-top: -25px;
                margin-left: -100px;
                left:${x + w + 20}px;
                top:50px;
                width:50px;
                border: 0px;
                height:50px;
                font-size: 20px;
                background-color: rgba(200,200,200,0.8);
                z-index: 999999999;
                transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
                `;
            btnLeft.innerText="<";
            btnRight.innerText=">";
            img.style.cssText=`
                position:fixed;
                border-radius: 12px;
                left:${x}px;
                top:50px;
                width:${w}px;
                height:${h}px;
                z-index: 999999999;
                transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
                opacity:0;
                `;
            btnLeft.onclick=function() {
                // 记录当前 id 并尝试后退
                var preId = id;
                var left=document.getElementById(--id);
                // 跳过隐藏的图片
                while (left == null && id > 0) {
                    left=document.getElementById(--id);
                }
                if(Number(id) < 0) {
                    id = preId;
                    alert("已经是第一张了！");
                    console.log("btnLeft: " + id + ", imgId: " + imgId);
                    return;
                }
                img.src=left.src;
                x=left.offsetLeft;
                y=left.offsetTop;
                w=left.offsetWidth;
                h=left.offsetHeight;
                console.log("btnLeft: " + id);
            }
            btnRight.onclick=function() {
                // 记录当前 id 并尝试前进
                var preId = id;
                var right=document.getElementById(++id);
                // 跳过隐藏的图片
                while (right == null && id < imgId) {
                    right=document.getElementById(++id);
                }
                if(Number(id) >= Number(imgId)) {
                    id = preId;
                    alert("已经是最后一张了！");
                    console.log("btnRight: " + id + ", imgId: " + imgId);
                    return;
                }
                img.src=right.src;
                x=right.offsetLeft;
                y=right.offsetTop;
                w=right.offsetWidth;
                h=right.offsetHeight;
                console.log("btnRight: " + id);
            }
            img.onload=function(){
                document.body.appendChild(img);
                document.body.appendChild(btnRight);
                document.body.appendChild(btnLeft);
    
                // 浏览器宽高
                wh=window.innerHeight;
                ww=window.innerWidth;
    
                // 目标宽高和坐标
                if(w/h<ww/wh){
                    th=wh-10;
                    tw=w/h*th >> 0;
                    tx=(ww - tw) / 2;
                    ty=5;
                }
                else{
                    tw=ww;
                    th=h/w*tw >> 0;
                    tx=0;
                    ty=(wh-th)/2;
                }
                // 延迟写入否则不会有动画
                setTimeout(function(){
                    img.style.opacity=1;
                    img.style.height=th+"px";
                    img.style.width=tw+"px";
                    img.style.left=tx+"px";
                    img.style.top=ty+"px";
                    btnLeft.style.left=(tx-90)+"px";
                    btnLeft.style.top=(ty+th/2)+"px";
                    btnRight.style.left=(tx+tw+40)+"px";
                    btnRight.style.top=(ty+th/2)+"px";
                    // 点击隐藏
                    div.onclick=img.onclick=closeMove;
                },10);
            };
        }); //end event
    }
    
    function closeMove() {
        document.body.removeChild(div);
        document.body.removeChild(img);
        document.body.removeChild(btnRight);
        document.body.removeChild(btnLeft);
    }
    </script>
</gallery>