//延迟加载楼层
    function lazyLoadFloor(){
             var items = {},
             loadedItemNum = 0,
             totalItemNum = $floor.length,
             loadItemFn=null;                         
             
             $doc.on('floor-show', loadItemFn = function(e, index, elem) {
                 console.log(1);
                 //判断何时开始加载
                 if (items[index] !== 'loaded') {
                     $doc.trigger('floors-loadItem', [index, elem]);
                 }
             });
             $doc.on('floors-loadItem', function(e, index, elem) {
                 var html=buildFloor(floorData[index]),
                     $elem=$(elem);                
                        
                         items[index] = 'loaded';
                         console.log(items[index]);
                         loadedItemNum++;
                         console.log(index + ': loaded');
                         if (loadedItemNum === totalItemNum) {
                             // 全部加载完毕
                             $doc.trigger('floors-itemsLoaded');
                         }
                         setTimeout(function () {
                             $elem.html(html); 
                         },1000);                                       
             });
             $doc.on('floors-itemsLoaded', function(e) {
                 console.log('floors-itemsLoaded');
                 // 清除事件
                 $doc.off('floor-show', loadItemFn);
                 //$win.off('scroll resize', timeToShow);
             });
    };
    function buildFloor(floorData) {
        var html = '';
        html += '<div class="container">';
        html += buildFloorHead(floorData);
        html += buildFloorBody(floorData);
        html += '</div>';
        return html;
    };
    //按需加载头部
    function buildFloorHead(floorData) {
        var html = '';
        html += '<div class="floor-head">';
        html += '<h2 class="floor-title fl"><span class="floor-title-num">' + floorData.num + 'F</span><span class="floor-title-text">' + floorData.text + '</span></h2>';
        html += '<ul class="tab-item-wrap fr">';
        for (var i = 0; i < floorData.tabs.length; i++) {
            html += '<li class="fl"><a href="javascript:;" class="tab-item">' + floorData.tabs[i] + '</a></li>';
            if (i !== floorData.tabs.length - 1) {
                html += '<li class="floor-divider fl text-hidden">分隔线</li>';
            }
        }
        html += '</ul>';
        html += '</div>';
        return html;
    };
    //主体
    function buildFloorBody(floorData) {
        var html = '';
        html += '<div class="floor-body">';
        for (var i = 0; i < floorData.items.length; i++) {
            html += '<ul class="tab-panel">';
            for (var j = 0; j < floorData.items[i].length; j++) {
                html += '<li class="floor-item fl">';
                html += '<p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/loading.gif" class="floor-img" data-src="img/floor/' + floorData.num + '/' + (i + 1) + '/' + (j + 1) + '.png" alt="" /></a></p>';
                html += '<p class="floor-item-name"><a href="###" target="_blank" class="link">' + floorData.items[i][j].name + '</a></p>';
                html += '<p class="floor-item-price">' + floorData.items[i][j].price + '</p>';
                html += '</li>';
            }
            html += '</ul>';
        }
        html += '</div>';
        return html;
    };     
    var $win=$(window);
    var $doc=$(document);
    function isVisible($elem) {
        return ($win.height()+$win.scrollTop()>$elem.offset().top) && ($win.scrollTop()<$elem.offset().top+$elem.height())
    }
       function timeShow(){
        console.log('time show');
           $floor.each(function(index,elem){
            if(isVisible($(elem))){
                // console.log('the '+(index+1)+' floor is visible');
                $doc.trigger('floors-show',[index,elem]);
            }
        });
       }
       $win.on('scroll resize',timeShow);
       lazyLoadFloor();
       timeShow();