楼层HTML结构内容加载不出来
来源：3-4 楼层HTML结构的按需加载--全部加载完毕后的收尾工作
粉墨登场
2021-01-27 17:27:59
问题描述：
老师你好，每个楼层的HTML结构加载不出来，不知道哪里出了问题。请老师看一下
HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕淘网</title>
<!-- 引入重置样式文件 -->
<link rel="stylesheet" href="base.css">
<!-- 引入公共样式和组件模块化文件 -->
<link rel="stylesheet" href="common.css">
<!-- 引入css样式文件 -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 顶部导航结构开始 -->
<section class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl">
<a href="javascript:;" class="nav-site-login">亲，请登录</a>
</li>
<li class="fl">
<a href="javascript:;" class="nav-site-signup link">免费注册</a>
</li>
<li class="fl">
<a href="##" target="_blank" class="nav-site-mobile link">手机逛慕淘</a>
</li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="##" target="_blank" class="dropdown-toggle transition link">
我的慕淘
<i class="dropdown-arrow icon icon-xialajiantou transition"></i>
</a>
<ul class="dropdown-layer dropdown-left">
<li>
<a href="##" target="_blank" class="menu-item">
已买到的宝贝
</a>
</li>
<li>
<a href="##" target="_blank" class="menu-item">
我的足迹
</a>
</li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="##" target="_blank" class="dropdown-toggle transition link">
收藏夹
<i class="dropdown-arrow icon icon-xialajiantou
transition"></i>
</a>
<ul class="dropdown-layer dropdown-left">
<li>
<a href="##" target="_blank" class="menu-item">
收藏的宝贝
</a>
</li>
<li>
<a href="##" target="_blank" class="menu-item">
收藏的店铺
</a>
</li>
</ul>
</li>
<li class="fl">
<a href="##" target="_blank" class="nav-site-category link">
商品分类
</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load-address="js/dropdown.json">
<a href="##" target="_blank" class="dropdown-toggle transition link">
卖家中心
<i class="dropdown-arrow icon icon-xialajiantou transition"></i>
</a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
</ul>
</li>
<li class="menu dropdown fl nav-site-service" data-active="menu">
<a href="##" target="_blank" class="dropdown-toggle transition link">
联系客服
<i class="dropdown-arrow icon icon-xialajiantou transition"></i>
</a>
<ul class="dropdown-layer dropdown-right">
<li>
<a href="##" target="_blank" class="menu-item">
消费者客服
</a>
</li>
<li>
<a href="##" target="_blank" class="menu-item">
卖家客服
</a>
</li>
</ul>
</li>
</ul>
</div>
</section>
<!-- 顶部导航结构结束 -->
<!-- 头部内容结构开始 -->
<section class="header">
<div class="container">
<!-- 左边logo区域 -->
<h1 class="fl">
<a href="实战：慕淘网.html" class="header-logo text-hidden">慕课网</a>
</h1>
<!-- 中间搜索框区域 -->
<div class="header-search fl">
<form action="https://s.taobao.com/search" class="header-search-form">
<input type="text" name="q" class="header-search-input fl" placeholder="灵魂美食一元抢" autocomplete="off">
<input type="submit" class="header-search-btn fl" value="搜索">
</form>
<ul class="header-search-layer">
</ul>
</div>
<!-- 右边购物车区域 -->
<div class="header-cart-box fr">
<div class="header-cart transition">
<i class="icon-gouwuche icon transition fl cart-icon"></i>
<span class="header-cart-text">购物车</span>
<span class="header-cart-line">|</span>
<span class="header-cart-number">0</span>
<span class="dropdown-arrow icon-xialajiantou icon transition"></span>
</div>
<div class="header-cart-dropdown-layer dropdown-layer">
<!-- <p>购物车里还没有商品<br>快去选购吧!</p>
<i class="icon-konggouwuche icon"></i> -->
<p class="header-cart-dropdown-layer-title">最新加入的商品</p>
<div class="header-cart-dropdown-layer-item-box">
<div class="clearfix">
<img src="img/cart/1.png" class="fl">
<div class="fl header-cart-dropdown-layer-shop">
adidas 阿迪达斯 训练 男子<br> ￥ 335 x 1
</div>
<div class="fr header-cart-dropdown-layer-x">X</div>
</div>
<div class="clearfix">
<img src="img/cart/2.png" class="fl">
<div class="fl header-cart-dropdown-layer-shop">
adidas 阿迪达斯 训练 男子<br> ￥ 335 x 1
</div>
<div class="fr header-cart-dropdown-layer-x">X</div>
</div>
<div class="clearfix">
<img src="img/cart/2.png" class="fl">
<div class="fl header-cart-dropdown-layer-shop">
adidas 阿迪达斯 训练 男子<br> ￥ 335 x 1
</div>
<div class="fr header-cart-dropdown-layer-x">X</div>
</div>
<div class="clearfix">
<img src="img/cart/2.png" class="fl">
<div class="fl header-cart-dropdown-layer-shop">
adidas 阿迪达斯 训练 男子<br> ￥ 335 x 1
</div>
<div class="fr header-cart-dropdown-layer-x">X</div>
</div>
<div class="clearfix">
<img src="img/cart/2.png" class="fl">
<div class="fl header-cart-dropdown-layer-shop">
adidas 阿迪达斯 训练 男子<br> ￥ 335 x 1
</div>
<div class="fr header-cart-dropdown-layer-x">X</div>
</div>
</div>
<div class="clearfix header-cart-dropdown-layer-bottom">
<p class="fl">共 <b>0</b> 件商品 共计<b>￥ 0.00元</b></p>
<a href="javascript:;" class="fr">去购物车</a>
</div>
</div>
</div>
</div>
</section>
<!-- 头部内容结构结束 -->
<!-- 网站主导航内容结构开始 -->
<section class="nav-main">
<div class="container">
<a href="##" target="_blank" class="link">数码城</a><a href="##" target="_blank" class="link">天黑黑</a><a
href="##" target="_blank" class="link">团购</a><a href="##" target="_blank" class="link">发现</a><a
href="##" target="_blank" class="link">二手特价</a><a href="##" target="_blank" class="link">名品汇</a>
</div>
</section>
<!-- 网站主导航内容结构结束 -->
<!-- 网站主要内容部分内容结构开始 -->
<section class="focus">
<div class="container clearfix">
<!-- 左边商品分类区域 -->
<div class="category fl" id="focus-category">
<a href="##" target="_blank" class="category-title">
<i class="icon icon-jiugongge"></i>
商品分类
</a>
<ul class="category-list">
<li class="dropdown" data-active="category" data-load-address="js/category-detail-1.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
家用电器
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-2.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
手机、
</a><a href="##" target="_blank" class="dropdown-link">
运营商、
</a><a href="##" target="_blank" class="dropdown-link">
数码
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-3.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
电脑、
</a><a href="##" target="_blank" class="dropdown-link">
办公
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-4.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
家居、
</a><a href="##" target="_blank" class="dropdown-link">
家具、
</a><a href="##" target="_blank" class="dropdown-link">
家装、
</a><a href="##" target="_blank" class="dropdown-link">
厨具
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-5.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
男装、
</a><a href="##" target="_blank" class="dropdown-link">
女装、
</a><a href="##" target="_blank" class="dropdown-link">
童装、
</a><a href="##" target="_blank" class="dropdown-link">
内衣
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-6.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
化妆、
</a><a href="##" target="_blank" class="dropdown-link">
清洁、
</a><a href="##" target="_blank" class="dropdown-link">
宠物
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-7.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
运动户外、
</a><a href="##" target="_blank" class="dropdown-link">
钟表
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-8.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
汽车、
</a><a href="##" target="_blank" class="dropdown-link">
汽车用品
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-9.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
母婴、
</a><a href="##" target="_blank" class="dropdown-link">
玩具乐器
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-10.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
食品、
</a><a href="##" target="_blank" class="dropdown-link">
酒类、
</a><a href="##" target="_blank" class="dropdown-link">
生鲜、
</a><a href="##" target="_blank" class="dropdown-link">
特产
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-11.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
医药保健
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-12.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
图书、
</a><a href="##" target="_blank" class="dropdown-link">
音像、
</a><a href="##" target="_blank" class="dropdown-link">
电子书
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-13.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
彩票、
</a><a href="##" target="_blank" class="dropdown-link">
旅行、
</a><a href="##" target="_blank" class="dropdown-link">
充值、
</a><a href="##" target="_blank" class="dropdown-link">
票务
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load-address="js/category-detail-14.json">
<div class="dropdown-toggle">
<a href="##" target="_blank" class="dropdown-link">
理财、
</a><a href="##" target="_blank" class="dropdown-link">
众筹、
</a><a href="##" target="_blank" class="dropdown-link">
白条、
</a><a href="##" target="_blank" class="dropdown-link">
保险
</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
</ul>
</div>
<!-- 中间幻灯片区域 -->
<div id="focus-slider" class="slider fl">
<!-- 存放幻灯片图片的容器 -->
<div class="slider-container">
<!-- 这里使用div标签包裹，因为如果直接使用img标签就只能放图片了，扩展性不好 -->
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png"
class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/loading.gif" data-src="img/focus-slider/2.png"
class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/loading.gif" data-src="img/focus-slider/3.png"
class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank">
<img src="img/focus-slider/loading.gif" data-src="img/focus-slider/4.png"
class="slider-img">
</a>
</div>
</div>
<!-- 存放下方小圆点的父容器 -->
<ol class="slider-indicator-wrap">
<!-- 下方的四个小圆点 -->
<li class="slider-indicator fl"></li>
<li class="slider-indicator fl"></li>
<li class="slider-indicator fl"></li>
<li class="slider-indicator fl"></li>
</ol>
<!-- 左侧切换按钮 -->
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<!-- 右侧切换按钮 -->
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
<!-- 右侧边栏区域 -->
<div class="focus-sidebar fr">
<!-- 右侧顶部新闻区域 -->
<div class="focus-news">
<div class="focus-news-head">
<h2 class="focus-news-title fl">慕快报</h2>
<a href="##" target="_blank" class="link fr">更多 ></a>
</div>
<div class="focus-news-body">
<p class="text-ellipsis">
<a href="##" target="_blank" class="link">
<strong>[特惠]</strong>
精选图书满150减50
</a>
</p>
<p class="text-ellipsis">
<a href="##" target="_blank" class="link">
<strong>[公告]</strong>
因广州图书仓搬仓升级配送延迟
</a>
</p>
<p class="text-ellipsis">
<a href="##" target="_blank" class="link">
<strong>[特惠]</strong>
爆款手机12期免息 抽奖赢电视
</a>
</p>
<p class="text-ellipsis">
<a href="##" target="_blank" class="link">
<strong>[公告]</strong>
广东、福建受台风影响配送延迟
</a>
</p>
<p class="text-ellipsis">
<a href="##" target="_blank" class="link">
<strong>[特惠]</strong>
大闸蟹领券满399减180
</a>
</p>
</div>
</div>
<!-- 右侧中间服务区域 -->
<div class="focus-service cf">
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">机票</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">电影票</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">游戏</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">彩票</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">加油卡</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">酒店</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">火车票</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">众筹</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">理财</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">礼品卡</span>
</a>
<a href="##" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">白条</span>
</a>
</div>
<!-- 右侧底部小图片区域 -->
<div class="focus-ad">
</div>
</div>
</div>
</section>
<!-- 网站主要内容部分内容结构结束 -->
<!-- 今日推荐商品内容结构开始 -->
<section class="todays">
<div class="container clearfix">
<div id="todays-slider" class="slider fl">
<div class="slider-container">
<div class="slider-item">
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/1.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/2.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/3.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/4.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/5.png"
class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/6.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/7.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/8.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/9.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/10.png"
class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/11.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/1.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/2.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/4.png"
class="slider-img">
</a>
<a href="##" target="_blank" class="fl">
<img src="img/todays-slider/loading.gif" data-src="img/todays-slider/5.png"
class="slider-img">
</a>
</div>
</div>
<!-- 左侧切换按钮 -->
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<!-- 右侧切换按钮 -->
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
</div>
</section>
<!-- 今日推荐商品内容结构结束 -->
<!-- 楼层导航内容结构开始 -->
<!-- 楼层 1 -->
<section class="floor">
<div class="container">
<img src="img/floor-loading.gif">
</div>
</div>
</section>
<!-- 楼层 2 -->
<section class="floor">
<div class="container">
<img src="img/floor-loading.gif">
</div>
</section>
<!-- 楼层 3 -->
<section class="floor">
<div class="container">
<img src="img/floor-loading.gif">
</div>
</section>
<!-- 楼层 4 -->
<section class="floor">
<div class="container">
<img src="img/floor-loading.gif">
</div>
</section>
<!-- 楼层 5 -->
<section class="floor">
<div class="container">
<img src="img/floor-loading.gif">
</div>
</section>
<!-- 楼层导航内容结构结束 -->
<!-- 引入jQuery文件 -->
<script src="../jquery.js"></script>
<script>
// 实际的开发中都是从别的服务器上引入jQuery文件，比如百度资源库、CDN资源库，如果这些服务器出现问题无法引入时，就从本地引入。所以这里使用逻辑运算符判断一下。如果没有成功引入jQuery文件，便从本地引入。 使用短路操作符 或||
window.jQuery || document.write('<script src="../jquery.js"><\/script');
</script>
<!-- 引入查看浏览器是否支持transition属性的代码文件 -->
<script src="js/transition.js"></script>
<!-- 引入各种动画类型和动画效果的js代码文件 -->
<script src="js/showHide.js"></script>
<!-- 引入下拉菜单的组件模块化文件 -->
<script src="js/dropdown.js"></script>
<!-- 引入search搜索框组件模块化文件 -->
<script src="js/search.js"></script>
<!-- 引入滑动切换效果的组件模块化文件 -->
<script src="js/滑动切换效果.js"></script>
<!-- 引入淡入淡出和第一种单独滑动切换效果的组件模块化文件 -->
<script src="js/幻灯片淡入淡出和第一种单独滑动切换效果.js"></script>
<!-- 引入tab选项卡切换效果的组件模块化文件 -->
<script src="tab.js"></script>
<!-- 引入JS脚本代码文件 -->
<script src="js/js.js"></script>
</body>
</html>
JS相关代码
/*
// 1. 顶部右边导航栏的每一项鼠标移入或移出时的交互.第一个函数是鼠标移入时，第二个是移出时
$('.dropdown').hover(function() {
var $dropdown = $(this);
// 当鼠标移入时每一项的a标签css样式变化
$dropdown.find('.dropdown-toggle').css({
'background-color': '#fff',
'border-color': '#cdd0d4'
});
// 移入时右侧小箭头变成向上的
$dropdown.find('.dropdown-arrow').css({
'background': 'url(img/dropdown-arrow-active.png) no-repeat'
});
// 移入时下拉菜单显示出来
$dropdown.find('.dropdown-layer').fadeIn();
// 这是鼠标移出时的css变化
}, function() {
var $dropdown = $(this);
// 当鼠标移出时恢复原样
$dropdown.find('.dropdown-toggle').css({
'background-color': '',
'border-color': '#f3f5f7'
});
// 鼠标移出时箭头恢复向下
$dropdown.find('.dropdown-arrow').css({
'background': 'url(img/dropdown-arrow.png) no-repeat'
});
// 移出时下拉菜单隐藏
$dropdown.find('.dropdown-layer').fadeOut();
})
*/
// 在JS中控制交互会引起重绘和回流，影响性能，因此像这些简单的鼠标移入移出可以使用css3中更为简单的的hover伪类完成。添加css类也会引起重绘和回流。通过js添加样式，有一个样式修改就是一次DOM和样式的操作，通过js添加css类名就是将多次的DOM和样式修改合并在一起了，所以这样可以减少对一些style信息的请求
/*
1、回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。
2、重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了。
3、回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流。
比如：添加或者删除可见的DOM元素（回流），元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变。
*/
(function ($) {
// 1. 给所有menu元素添加自定义事件dropdown-show，当执行到show时就会触发这个事件
$('.menu').on('dropdown-show', function () {
// 调用loadOnce函数，并将当前调用该方法的对象和一个回调函数当作参数传入。buildMenuItem是创建下拉菜单具体内容的函数
loadOnce($(this), buildMenuItem);
// 1.调用下拉菜单的组件模块化方法。以一个对象的形式传入的参数是指定要使用哪个动画类型及效果，以及 active属性是添加class类名的前缀，作用是鼠标移入时，导航项的样式会有相应的改变
}).isDropDown({
css3: true,
js: false,
delay: 200,
animation: 'fade',
})
// 1. 该函数是创建menu下的item内容
function buildMenuItem($ele, data) {
var html = '';
if (data.length === 0) return;
for (var i in data) {
html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>';
}
$ele.find('.dropdown-layer').html(html);
}
// 2. 调用搜索框的组件模块化方法
var header_search = $('.header-search'),
// 该变量用来拼接服务器返回的数据并按照HTML标签的结构组合在一起
content = '',
// 该变量是指定当在搜索框搜索内容时下拉菜单到底显示几条搜索数据
maxNum = 10;
// 类名为header-search的DOM元素调用isSearch方法函数，该方法是通过$.fn.extend()方法添加在jQuery原型对象上的，所有jQuery对象都可以调用。传入具体的参数，以对象的形式
header_search.isSearch({
css3: false,
js: true,
autoComplete: true,
animation: 'fade',
getDataDealy: 0,
// 给类名为header-search的DOM元素绑定两个自定义事件search-getData、search-noData。两个形参，事件函数中第一个必须是event事件对象，第二个参数开始才是要传入的值，也就是服务器返回的数据。
}).on('search-getData', function (event, data) {
var $this = $(this);
// 让content变量等于调用createTaoBaoSearchLayer函数返回的拼接好的HTML结构内容
content = createTaoBaoSearchLayer(data, maxNum);
// 将拼接好的HTML结构内容填充到下拉菜单中。调用通过原型对象添加在构造函数Search上的appendLayer函数，并将拼接好的内容content变量当作参数传入。
$this.isSearch('appendLayer', content);
// 如果返回的数据是有内容的，就调用isSearch函数，并传入一个字符串，意思是让下拉菜单显示出来
if (content) {
$this.isSearch('showLayer');
// 反之，如果没有内容，同样调用isSearch函数，也传入一个字符串，但是是让下拉菜单隐藏，因为没有内容就没有必要显示下拉菜单。
} else {
$this.isSearch('hideLayer');
}
// 这是没有获取到数据时被触发的自定义事件。
}).on('search-noData', function () {
// 如果没有获取到数据就让下拉菜单隐藏起来，将一个空字符串当作参数传入。填充下拉菜单中的内容项为空.
$(this).isSearch('hideLayer').isSearch('appendLayer', '');
// 再使用事件代理的方法给每一条搜索内容绑定点击事件，当被点击时调用setInputValue函数。该函数是通过原型对象添加在构造函数Search上的，并将被点击的搜索框的html内容当作参数传递。并且再执行一下提交函数submit，这个函数也是通过原型对象添加在构造函数Search上的。
}).on('click', '.header-search-layer-item', function () {
header_search.isSearch('setInputValue', $(this).html());
header_search.isSearch('submit');
})
// 2. 定义一个函数，用于生成返回的数据内容，并且用其创建HTML结构，最后将这个HTML结构返回
function createTaoBaoSearchLayer(data, maxNum) {
var html = '';
// 如果返回的数据长度为0，就表示没有数据，直接返回空字符串
if (data['result'].length === 0) {
return '';
}
// 循环遍历返回数据的result属性，如果数据大于我们要展示的最大内容数量，直接break退出循环。
for (var i in data['result']) {
if (i >= maxNum) {
break;
}
// html依次拼接html结构并将返回的数据变成html内容
html += ' <li class="header-search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>'
}
// 最后将拼接好的数据内容返回出去
return html;
}
// 3. 购物车的交互效果，使用showHide方法
$('.header-cart-box').isDropDown({
css3: true,
js: false,
animation: 'fade',
active: 'cart',
});
// 4. 中心区域按需加载商品详情
$('#focus-category').find('.dropdown')
// 绑定dropdown-show事件，当下拉菜单显示出来之后填充里面的具体内容。
.on('dropdown-show', function () {
// 使用loadOnce函数，传入DOM元素dropdown，以及回调函数createCategoryDetails
loadOnce($(this), createCategoryDetails);
})
.isDropDown({
css3: true,
js: false,
animation: 'fadeSlideLeftRight',
})
// 这是创建中心区域详细商品内容的函数
function createCategoryDetails($ele, data) {
// 创建一个空字符串变量
var html = '';
// 循环请求后返回的数据
for (var i in data) {
// 让空字符串变量按照相应的HTML结构样式拼接
html += ' <dl class="category-details cf"><dt class="category-details-title fl"><a href="##" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';
for (var j in data[i].items) {
// 这里也是，让空字符串变量按照相应的HTML结构样式拼接
html += '<a href="##" target="_blank" class="link">' + data[i].items[j] + '</a>';
}
// 再加上闭合标签，形成一个完整的HTML标签
html += '</dd></dl>';
}
// 最后将拼接好的字符串变量填充到下拉菜单的HTML结构中去
$ele.find('.dropdown-layer').html(html);
}
// 该函数是只按需加载一次的函数，如果加载过了就不会再加载了(大家共用的，用于Ajax请求)
function loadOnce($ele, success) {
// 如果元素上没有data-load-address这个属性，直接退出函数不执行了，因为只有有data-load-address这个属性表明才是需要按需加载的。
if (!$ele.data('load-address')) return;
// 如果元素没有data-loaded属性，才执行下面的语句，表明这是第一次按需加载，也因为只需要执行一次，所以才有了这个判断。
if (!$ele.data('loaded')) {
// 如果是第一次加载，进来之后先将data-loaded属性的值设为true，这样就可以阻止其它的新的ajax请求，从而继续执行本次请求
$ele.data('loaded', true);
setTimeout(function () {
// 发起Ajax请求，请求地址就是元素data-load-address属性的值，data是形参，是请求完后返回的数据值
$.getJSON($ele.data('load-address')).done(function (data) {
// 如果传入的success参数是一个回调函数，就执行这个回调函数。将$ele和请求获取到的数据当作参数传入
if (typeof success === 'function') success($ele, data);
// 如果请求失败了就将data-loaded属性的值设为false，这样下一次还可以继续请求
}).fail(function () {
$ele.data('loaded', false);
})
}, 1000);
}
}
// 5. 幻灯片切换效果
var $focusSlider = $('#focus-slider');
// 按需加载。index是当前显示图片的索引，ele是当前显示图片的img标签的外层父容器也就是那个类名为slider-item的div元素
$focusSlider.on('slider-show', function(event, index, ele) {
// 先找到img标签，通过find()方法
var $img = $(ele).find('.slider-img');
// 如果准备显示的图片的img标签上的src属性值和data-src属性值相等，表示已经加载过了，因此不执行下面的代码了，没有意义了
if($img.attr('src') === $img.data('src')) return;
// 调用loadImg函数，传入三个实际参数，第一个是显示图片的url地址，是img标签上的data-src属性的值，第二个实参是加载成功时执行的一个函数，形参url是接收该回调函数被调用时传入的url地址，只有当图片加载成功之后，才会执行这个回调函数，并将这个可以加载的url地址变成要显示的图片图片的src属性值，最后替换掉loading动图，完成显示。 第三个实参是加载失败时执行的函数。
loadImg($img.data('src'), function(url) {
$img.attr('src', url);
// 这是加载图片失败时被执行的函数
}, function(url) {
console.log('从' + url + '加载图片失败');
// 当加载图片失败时，选一张备用的图片先替代一下
$img.attr('src', 'img/focus-slider/placeholder.png');
})
console.log(index + ' ' + 'loaded')
})
// 该函数用于加载图片，url是要显示出来的图片的地址，imgLoaded是一个回调函数
function loadImg(url, imgLoaded, imgFailed) {
// 实例化一个图片对象
var image = new Image();
// 延时1.5秒之后再加载图片，模拟加载时需要花费的时间。延迟完之后将该图片的src地址变为要显示出来的图片的地址
setTimeout(function() {
image.src = url;
}, 1000)
// 这是加载图片成功时触发的事件。load事件是图片对象自带的事件。给图片对象绑定图片加载完成的事件，当图片加载完成之后进行判断，如果调用时传入的第二个实参是一个函数，就执行这个函数，因为这个时候表示图片已经可以加载出来了，所以才会执行回调函数imgLoaded函数，并将可以加载出来的url地址当作实际参数传入。
image.onload = function() {
if(typeof imgLoaded === 'function') imgLoaded(url);
}
// 这是加载图片失败时触发的事件
image.onerror = function() {
if(typeof imgFailed === 'function') imgFailed(url);
}
}
// 单独控制图片的划动切换效果
$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // 滑动效果是slide，淡入淡出是fade
activeIndex: 0, // 初始化时哪张图片在最上面，从0开始，2就是第三张
interval: 0, // 自动切换的时间间隔。如果为0表示不开启自动切换，有值就代表自动切换的间隔。毫秒为单位，500毫秒就是0.5秒
})
// 6. 今日推荐商品幻灯片滑动功能
var $todaysSlider = $('#todays-slider');
// 今日推荐区域的最外层父容器绑定自定义事件：slider-show
$todaysSlider.on('slider-show', function(e, index, ele) {
// 找到其下的slider-img，也就是每张图片
var $imgs = $(ele).find('.slider-img');
// 循环每张图片，并且将显示的图片替换掉loading动图
$imgs.each(function(_, ele) {
// ele是each()方法中的形参。each中的形参第一位是索引，第二个是DOM元素，为了有ele，第一个必须要写。但是如果用不到的话，可以随便取个名字用来占位。这里第一个参数就是用 _下划线占位的。
var $img = $(ele);
// 如果img标签的src属性值和data-src属性值相等说明已经加载过图片了，直接返回不执行下面的代码
if($img.data('src') === $img.attr('src')) return;
// 最后将img标签的src属性更换为data-src属性的值，加载图片显示出来
loadImg($img.data('src'), function(url) {
$img.attr('src', url);
})
})
})
$todaysSlider.slider({
css3: true,
js: false,
animation: 'slide',
activeIndex: 0,
})
// 7. 楼层导航选项卡切换功能
var $floor = $('.floor');
// 给外面的大容器绑定自定义事件tab-show，当被触发时，执行该事件函数内的代码（这是选项卡切换时的按需加载）
$floor.each(function(_, ele) {
$(ele).on('tab-show', function(e, index, ele) {
// 找到其下的tab-img，也就是每张图片
var $imgs = $(ele).find('.tab-img');
// 循环每张图片，并且将显示的图片替换掉loading动图
$imgs.each(function(_, ele) {
// ele是each()方法中的形参。each中的形参第一位是索引，第二个是DOM元素，为了有ele，第一个必须要写。但是如果用不到的话，可以随便取个名字用来占位。这里第一个参数就是用 _下划线占位的。
var $img = $(ele);
// 如果img标签的src属性值和data-src属性值相等说明已经加载过图片了，直接返回不执行下面的代码
if($img.data('src') === $img.attr('src')) return;
// 最后将img标签的src属性更换为data-src属性的值，加载图片显示出来
loadImg($img.data('src'), function(url) {
$img.attr('src', url);
})
})
});
})
var $win = $(window),
$docu = $(document),
floorData = [
// 楼层 1 数据内容
{
num: '1',
text: '服装鞋包',
tabs: ['大牌', '男装', '女装'],
offsetTop: $floor.eq(0).offset().top,
height: $floor.eq(0).height(),
items: [
[{
name: '匡威男棒球开衫外套2015',
price: 479
}, {
name: 'adidas 阿迪达斯 训练 男子',
price: 335
}, {
name: '必迈BMAI一体织跑步短袖T恤',
price: 159
}, {
name: 'NBA袜子半毛圈运动高邦棉袜',
price: 65
}, {
name: '特步官方运动帽男女帽子2016',
price: 69
}, {
name: 'KELME足球训练防寒防风手套',
price: 4999
}, {
name: '战地吉普三合一冲锋衣',
price: 289
}, {
name: '探路者户外男士徒步鞋',
price: 369
}, {
name: '羽绒服2015秋冬新款轻薄男士',
price: 399
}, {
name: '溯溪鞋涉水鞋户外鞋',
price: 689
}, {
name: '旅行背包多功能双肩背包',
price: 269
}, {
name: '户外旅行双肩背包OS0099',
price: 99
}],
[{
name: '匡威男棒球开衫外套2015',
price: 479
}, {
name: 'adidas 阿迪达斯 训练 男子',
price: 335
}, {
name: '必迈BMAI一体织跑步短袖T恤',
price: 159
}, {
name: 'NBA袜子半毛圈运动高邦棉袜',
price: 65
}, {
name: '特步官方运动帽男女帽子2016',
price: 69
}, {
name: 'KELME足球训练防寒防风手套',
price: 4999
}, {
name: '战地吉普三合一冲锋衣',
price: 289
}, {
name: '探路者户外男士徒步鞋',
price: 369
}, {
name: '羽绒服2015秋冬新款轻薄男士',
price: 399
}, {
name: '溯溪鞋涉水鞋户外鞋',
price: 689
}, {
name: '旅行背包多功能双肩背包',
price: 269
}, {
name: '户外旅行双肩背包OS0099',
price: 99
}],
[{
name: '匡威男棒球开衫外套2015',
price: 479
}, {
name: 'adidas 阿迪达斯 训练 男子',
price: 335
}, {
name: '必迈BMAI一体织跑步短袖T恤',
price: 159
}, {
name: 'NBA袜子半毛圈运动高邦棉袜',
price: 65
}, {
name: '特步官方运动帽男女帽子2016',
price: 69
}, {
name: 'KELME足球训练防寒防风手套',
price: 4999
}, {
name: '战地吉普三合一冲锋衣',
price: 289
}, {
name: '探路者户外男士徒步鞋',
price: 369
}, {
name: '羽绒服2015秋冬新款轻薄男士',
price: 399
}, {
name: '溯溪鞋涉水鞋户外鞋',
price: 689
}, {
name: '旅行背包多功能双肩背包',
price: 269
}, {
name: '户外旅行双肩背包OS0099',
price: 99
}]
]
},
// 楼层 2 数据内容
{
num: '2',
text: '个护美妆',
tabs: ['热门', '国际大牌', '国际名品'],
offsetTop: $floor.eq(1).offset().top,
height: $floor.eq(1).height(),
items: [
[{
name: '韩束红石榴鲜活水盈七件套装',
price: 169
}, {
name: '温碧泉八杯水亲亲水润五件套装',
price: 198
}, {
name: '御泥坊红酒透亮矿物蚕丝面膜贴',
price: 79.9
}, {
name: '吉列手动剃须刀锋隐致护',
price: 228
}, {
name: 'Mediheal水润保湿面膜',
price: 119
}, {
name: '纳益其尔芦荟舒缓保湿凝胶',
price: 39
}, {
name: '宝拉珍选基础护肤旅行四件套',
price: 299
}, {
name: '温碧泉透芯润五件套装',
price: 257
}, {
name: '玉兰油多效修护三部曲套装',
price: 199
}, {
name: 'LOREAL火山岩控油清痘洁面膏',
price: 36
}, {
name: '百雀羚水嫩倍现盈透精华水',
price: 139
}, {
name: '珀莱雅新柔皙莹润三件套',
price: 99
}],
[{
name: '韩束红石榴鲜活水盈七件套装',
price: 169
}, {
name: '温碧泉八杯水亲亲水润五件套装',
price: 198
}, {
name: '御泥坊红酒透亮矿物蚕丝面膜贴',
price: 79.9
}, {
name: '吉列手动剃须刀锋隐致护',
price: 228
}, {
name: 'Mediheal水润保湿面膜',
price: 119
}, {
name: '纳益其尔芦荟舒缓保湿凝胶',
price: 39
}, {
name: '宝拉珍选基础护肤旅行四件套',
price: 299
}, {
name: '温碧泉透芯润五件套装',
price: 257
}, {
name: '玉兰油多效修护三部曲套装',
price: 199
}, {
name: 'LOREAL火山岩控油清痘洁面膏',
price: 36
}, {
name: '百雀羚水嫩倍现盈透精华水',
price: 139
}, {
name: '珀莱雅新柔皙莹润三件套',
price: 99
}],
[{
name: '韩束红石榴鲜活水盈七件套装',
price: 169
}, {
name: '温碧泉八杯水亲亲水润五件套装',
price: 198
}, {
name: '御泥坊红酒透亮矿物蚕丝面膜贴',
price: 79.9
}, {
name: '吉列手动剃须刀锋隐致护',
price: 228
}, {
name: 'Mediheal水润保湿面膜',
price: 119
}, {
name: '纳益其尔芦荟舒缓保湿凝胶',
price: 39
}, {
name: '宝拉珍选基础护肤旅行四件套',
price: 299
}, {
name: '温碧泉透芯润五件套装',
price: 257
}, {
name: '玉兰油多效修护三部曲套装',
price: 199
}, {
name: 'LOREAL火山岩控油清痘洁面膏',
price: 36
}, {
name: '百雀羚水嫩倍现盈透精华水',
price: 139
}, {
name: '珀莱雅新柔皙莹润三件套',
price: 99
}]
]
},
// 楼层 3 数据内容
{
num: '3',
text: '手机通讯',
tabs: ['热门', '品质优选', '新机尝鲜'],
offsetTop: $floor.eq(2).offset().top,
height: $floor.eq(2).height(),
items: [
[{
name: '摩托罗拉 Moto Z Play',
price: 3999
}, {
name: 'Apple iPhone 7 (A1660)',
price: 6188
}, {
name: '小米 Note 全网通 白色',
price: 999
}, {
name: '小米5 全网通 标准版 3GB内存',
price: 1999
}, {
name: '荣耀7i 海岛蓝 移动联通4G手机',
price: 1099
}, {
name: '乐视（Le）乐2（X620）32GB',
price: 1099
}, {
name: 'OPPO R9 4GB+64GB内存版',
price: 2499
}, {
name: '魅蓝note3 全网通公开版',
price: 899
}, {
name: '飞利浦 X818 香槟金 全网通4G',
price: 1998
}, {
name: '三星 Galaxy S7（G9300）',
price: 4088
}, {
name: '华为 荣耀7 双卡双待双通',
price: 1128
}, {
name: '努比亚(nubia)Z7Max(NX505J)',
price: 728
}],
[{
name: '摩托罗拉 Moto Z Play',
price: 3999
}, {
name: 'Apple iPhone 7 (A1660)',
price: 6188
}, {
name: '小米 Note 全网通 白色',
price: 999
}, {
name: '小米5 全网通 标准版 3GB内存',
price: 1999
}, {
name: '荣耀7i 海岛蓝 移动联通4G手机',
price: 1099
}, {
name: '乐视（Le）乐2（X620）32GB',
price: 1099
}, {
name: 'OPPO R9 4GB+64GB内存版',
price: 2499
}, {
name: '魅蓝note3 全网通公开版',
price: 899
}, {
name: '飞利浦 X818 香槟金 全网通4G',
price: 1998
}, {
name: '三星 Galaxy S7（G9300）',
price: 4088
}, {
name: '华为 荣耀7 双卡双待双通',
price: 1128
}, {
name: '努比亚(nubia)Z7Max(NX505J)',
price: 728
}],
[{
name: '摩托罗拉 Moto Z Play',
price: 3999
}, {
name: 'Apple iPhone 7 (A1660)',
price: 6188
}, {
name: '小米 Note 全网通 白色',
price: 999
}, {
name: '小米5 全网通 标准版 3GB内存',
price: 1999
}, {
name: '荣耀7i 海岛蓝 移动联通4G手机',
price: 1099
}, {
name: '乐视（Le）乐2（X620）32GB',
price: 1099
}, {
name: 'OPPO R9 4GB+64GB内存版',
price: 2499
}, {
name: '魅蓝note3 全网通公开版',
price: 899
}, {
name: '飞利浦 X818 香槟金 全网通4G',
price: 1998
}, {
name: '三星 Galaxy S7（G9300）',
price: 4088
}, {
name: '华为 荣耀7 双卡双待双通',
price: 1128
}, {
name: '努比亚(nubia)Z7Max(NX505J)',
price: 728
}]
]
},
// 楼层 4 数据内容
{
num: '4',
text: '家用电器',
tabs: ['热门', '大家电', '生活电器'],
offsetTop: $floor.eq(3).offset().top,
height: $floor.eq(3).height(),
items: [
[{
name: '暴风TV 超体电视 40X 40英寸',
price: 1299
}, {
name: '小米（MI）L55M5-AA 55英寸',
price: 3699
}, {
name: '飞利浦HTD5580/93 音响',
price: 2999
}, {
name: '金门子H108 5.1套装音响组合',
price: 1198
}, {
name: '方太ENJOY云魔方抽油烟机',
price: 4390
}, {
name: '美的60升预约洗浴电热水器',
price: 1099
}, {
name: '九阳电饭煲多功能智能电饭锅',
price: 159
}, {
name: '美的电烤箱家用大容量',
price: 329
}, {
name: '奥克斯(AUX)936破壁料理机',
price: 1599
}, {
name: '飞利浦面条机 HR2356/31',
price: 665
}, {
name: '松下NU-JA100W 家用蒸烤箱',
price: 1799
}, {
name: '飞利浦咖啡机 HD7751/00',
price: 1299
}],
[{
name: '暴风TV 超体电视 40X 40英寸',
price: 1299
}, {
name: '小米（MI）L55M5-AA 55英寸',
price: 3699
}, {
name: '飞利浦HTD5580/93 音响',
price: 2999
}, {
name: '金门子H108 5.1套装音响组合',
price: 1198
}, {
name: '方太ENJOY云魔方抽油烟机',
price: 4390
}, {
name: '美的60升预约洗浴电热水器',
price: 1099
}, {
name: '九阳电饭煲多功能智能电饭锅',
price: 159
}, {
name: '美的电烤箱家用大容量',
price: 329
}, {
name: '奥克斯(AUX)936破壁料理机',
price: 1599
}, {
name: '飞利浦面条机 HR2356/31',
price: 665
}, {
name: '松下NU-JA100W 家用蒸烤箱',
price: 1799
}, {
name: '飞利浦咖啡机 HD7751/00',
price: 1299
}],
[{
name: '暴风TV 超体电视 40X 40英寸',
price: 1299
}, {
name: '小米（MI）L55M5-AA 55英寸',
price: 3699
}, {
name: '飞利浦HTD5580/93 音响',
price: 2999
}, {
name: '金门子H108 5.1套装音响组合',
price: 1198
}, {
name: '方太ENJOY云魔方抽油烟机',
price: 4390
}, {
name: '美的60升预约洗浴电热水器',
price: 1099
}, {
name: '九阳电饭煲多功能智能电饭锅',
price: 159
}, {
name: '美的电烤箱家用大容量',
price: 329
}, {
name: '奥克斯(AUX)936破壁料理机',
price: 1599
}, {
name: '飞利浦面条机 HR2356/31',
price: 665
}, {
name: '松下NU-JA100W 家用蒸烤箱',
price: 1799
}, {
name: '飞利浦咖啡机 HD7751/00',
price: 1299
}]
]
},
// 楼层 5 数据内容
{
num: '5',
text: '电脑数码',
tabs: ['热门', '电脑/平板', '潮流影音'],
offsetTop: $floor.eq(4).offset().top,
height: $floor.eq(4).height(),
items: [
[{
name: '戴尔成就Vostro 3800-R6308',
price: 2999
}, {
name: '联想IdeaCentre C560',
price: 5399
}, {
name: '惠普260-p039cn台式电脑',
price: 3099
}, {
name: '华硕飞行堡垒旗舰版FX-PRO',
price: 6599
}, {
name: '惠普(HP)暗影精灵II代PLUS',
price: 12999
}, {
name: '联想(Lenovo)小新700电竞版',
price: 5999
}, {
name: '游戏背光牧马人机械手感键盘',
price: 499
}, {
name: '罗技iK1200背光键盘保护套',
price: 799
}, {
name: '西部数据2.5英寸移动硬盘1TB',
price: 419
}, {
name: '新睿翼3TB 2.5英寸 移动硬盘',
price: 849
}, {
name: 'Rii mini i28无线迷你键盘鼠标',
price: 349
}, {
name: '罗技G29 力反馈游戏方向盘',
price: 2999
}],
[{
name: '戴尔成就Vostro 3800-R6308',
price: 2999
}, {
name: '联想IdeaCentre C560',
price: 5399
}, {
name: '惠普260-p039cn台式电脑',
price: 3099
}, {
name: '华硕飞行堡垒旗舰版FX-PRO',
price: 6599
}, {
name: '惠普(HP)暗影精灵II代PLUS',
price: 12999
}, {
name: '联想(Lenovo)小新700电竞版',
price: 5999
}, {
name: '游戏背光牧马人机械手感键盘',
price: 499
}, {
name: '罗技iK1200背光键盘保护套',
price: 799
}, {
name: '西部数据2.5英寸移动硬盘1TB',
price: 419
}, {
name: '新睿翼3TB 2.5英寸 移动硬盘',
price: 849
}, {
name: 'Rii mini i28无线迷你键盘鼠标',
price: 349
}, {
name: '罗技G29 力反馈游戏方向盘',
price: 2999
}],
[{
name: '戴尔成就Vostro 3800-R6308',
price: 2999
}, {
name: '联想IdeaCentre C560',
price: 5399
}, {
name: '惠普260-p039cn台式电脑',
price: 3099
}, {
name: '华硕飞行堡垒旗舰版FX-PRO',
price: 6599
}, {
name: '惠普(HP)暗影精灵II代PLUS',
price: 12999
}, {
name: '联想(Lenovo)小新700电竞版',
price: 5999
}, {
name: '游戏背光牧马人机械手感键盘',
price: 499
}, {
name: '罗技iK1200背光键盘保护套',
price: 799
}, {
name: '西部数据2.5英寸移动硬盘1TB',
price: 419
}, {
name: '新睿翼3TB 2.5英寸 移动硬盘',
price: 849
}, {
name: 'Rii mini i28无线迷你键盘鼠标',
price: 349
}, {
name: '罗技G29 力反馈游戏方向盘',
price: 2999
}]
]
}];
// 这是创建每个楼层HTML结构内容的函数
function buildFloor(floorData) {
var html = '';
html += '<div class="container">';
html += buildFloorHead(floorData);
html += buildFloorBody(floorData);
html += '</div>';
return html;
}
// 这是创建楼层头部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="fl floor-divider text-hidden">分隔线</li>';
}
}
html += '</ul>';
html += '</div>';
return html;
}
// 这是创建楼层主体部分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="tab-img" data-src="img/floor/' + floorData.num + '/' + ( i + 1) + '/' + (j + 1) + '.png"></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;
}
function isVisible($ele) {
// $win.height()是屏幕可视区的高度、$win.scrollTop()是滚动条滚动过的总高度、$ele.offset().top是元素的上边框距离页面顶部的距离。如果屏幕可视区的高度加上滚动条滚动过的总高度的和大于元素的上边框距离页面顶部的距离时，说明元素进入了可视区。 滚动条滚动的高度小于元素自身高度加上元素上边框距离页面顶部距离的和时，说明元素仍然在可视区域。 这两个条件同时满足时，说明元素还在可视区域内
return ($win.height() + $win.scrollTop() > $ele.offset().top) && ($win.scrollTop() < $ele.height() + $ele.offset().top);
}
function timeToShow() {
$floor.each(function(index, ele) {
// 调用isVisible函数，将每个楼层的最外层父容器传入，如果判断为真表示元素显示在可视区域内，可以加载内容了，这时让根文档document触发自定义事件floor-show，将索引和DOM元素当作参数传入。
if(isVisible($(ele))) {
$docu.triggerHandler('floor-show', [index, ele]);
}
})
}
// $win.on('scroll', timeToShow);
timeToShow();
lazyLoadFloor();
$floor.tab({
event: 'mouseenter', // 什么事件可以触发选项卡切换，mouseenter是鼠标移入，click是鼠标点击
css3: false,
js: false,
animation: 'fade',
activeIndex: 0,
interval: 0,
})
// 这是加载内容的函数
function lazyLoadFloor() {
var items = {},
loadedItemNum = 0,
totalItemNum = $floor.length,
loadItemFn = null;
// 什么时候开始加载
$docu.on('floor-show', loadItemFn = function(e, index, elem) {
if (items[index] !== 'loaded') {
$docu.trigger('floor-loadItem', [index, elem]);
}
});
// 开始加载
$docu.on('floor-loadItem', function(e, index, elem) {
var html = buildFloor(floorData[index]),
$ele = $(elem);
items[index] = 'loaded';
loadedItemNum++;
if(loadedItemNum === totalItemNum) {
$docu.triggerHandler('floor-itemsLoaded');
}
setTimeout(function() {
$ele.html(html);
}, 1000);
});
// 加载完成之后的收尾工作
$docu.on('floor-itemsLoaded', function(e) {
console.log('floor-itemsLoaded');
// 清除事件
$elem.off('floor-show', loadItemFn);
});
}
})(jQuery)
tab组件代码
(function($) {
'use strict';
function Tab($ele, options) {
this.$ele = $ele;
this.$options = options;
// 这是顶部右侧的三个导航选项，点击或鼠标移入时，页面切换成相应的选项卡页面
this.$items = this.$ele.find('.tab-item');
// 这是三个选项卡页
this.$panels = this.$ele.find('.tab-panel');
// 选项按钮的总个数
this.$itemsLen = this.$items.length;
// 默认显示页面的索引值，获取之前先使用_getCorrectIndex函数处理一下索引是否合法
this.$currentIndex = this._getCorrectIndex(this.$options.activeIndex);
// 调用初始化方法
this._init();
}
Tab.DEFAULTS = {
event: 'mouseenter',
css3: false,
js: false,
animation: 'fade',
activeIndex: 0,
interval: 0,
};
Tab.prototype._init = function() {
var self = this;
// 初始化显示
// 先将所有选项按钮上类名为tab-item-active的class移除
this.$items.removeClass('tab-item-active');
// 再将默认显示的选项按钮添加上tab-item-active类名，让其显示为红色且下方有向上的小箭头图标
this.$items.eq(this.$currentIndex).addClass('tab-item-active');
// 默认显示的页面显示出来
this.$panels.eq(this.$currentIndex).show();
// 让默认显示的页面触发自定义事件tab-show，为按需加载做准备。在显示之前先将图片加载出来。
this.$ele.triggerHandler('tab-show', [this.$currentIndex, this.$panels[this.$currentIndex]]);
// 监听显示隐藏事件，当被触发时，再触发自定义事件tab-show
this.$panels.on('show shown hide hidden', function(event) {
// 触发自定义事件tab-show、shown、hide、hidden， 再将触发的事件类型、触发的显示页面的索引值以及显示页面的DOM元素当作参数传入
self.$ele.triggerHandler('tab-' + event.type, [self.$panels.index(this), this]);
})
// 因为显示隐藏的页面会调用showHide组件，因此先将所有页面初始化
this.$panels.showHide(this.$options);
// 绑定事件。如果调用时指定的是click事件，那就用click事件触发，除此之外的其它所有事件都使用mouseenter事件，不管是写错了还是其它什么原因导致的。这样就有了一定的容错能力。
this.$options.event = this.$options.event === 'click' ? 'click' : 'mouseenter';
// 使用事件代理的方法给选项按钮绑定事件
this.$ele.on(this.$options.event, '.tab-item', function() {
// 当选项按钮被触发事件时，调用toggle函数，并将被点击的选项按钮的索引当作参数传入。self.$items.index(this)里的this指向触发事件的DOM元素：选项按钮
self.toggle(self.$items.index(this));
})
if(this.$options.interval && !isNaN(Number(this.$options.interval))) {
this.$ele.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
this.auto();
};
};
Tab.prototype._getCorrectIndex = function(index) {
if(isNaN(Number(index))) return index = 0;
if(index >= this.$itemsLen) return index = 0;
if(index < 0) return index = this.$itemsLen - 1;
return index;
};
Tab.prototype.toggle = function(index) {
// 如果当前显示的和准备显示的页面是同一个页面，直接返回，不执行下面的代码
if(this.$currentIndex === index) return;
// 当前显示的页面隐藏起来
this.$panels.eq(this.$currentIndex).showHide('hide');
// 准备显示的页面显示出来
this.$panels.eq(index).showHide('show');
// 当前激活样式的选项按钮去除激活的class类名，使其变成失活状态
this.$items.eq(this.$currentIndex).removeClass('tab-item-active');
// 准备显示的选项按钮增加激活的class类名，变成激活状态
this.$items.eq(index).addClass('tab-item-active');
// 更新索引保持一致。将当前显示页面的索引变成已经完成显示的页面的索引
this.$currentIndex = index;
};
Tab.prototype.auto = function() {
var self = this;
this.interval = setInterval(function() {
self.toggle(self._getCorrectIndex(self.$currentIndex + 1));
}, this.$options.interval);
};
Tab.prototype.pause = function() {
clearInterval(this.interval);
};
$.fn.extend({
tab: function(obj) {
return this.each(function() {
var $this = $(this),
mode = $this.data('tab'),
newObj = $.extend({}, Tab.DEFAULTS, typeof obj === 'object' && obj);
if(!mode) {
$this.data('tab', mode = new Tab($this, newObj));
}
if(typeof mode[obj] === 'function') {
mode[obj]();
}
})
}
});
})(jQuery)
写回答
1回答
-
同学你好， 因为楼层内容还没加载出来就调用了tab方法，所以无法实现效果，建议修改：
另外，如下图所示这句代码被注释了，需要去掉注释才可以
祝学习愉快~
0
相似问题
为什么我最后写完加载不出来图片
回答 1
为啥加载不出来，也不报错
回答 1