手机端版面利用和性能的优化永远的重点，本文主要介绍手机端顶部查询动态变化和滚动到才显示图片，前者有利于多显示内容区域数据，后者有利于提高浏览速度，且适当的动态效果有利于用户体验互动。效果图和演示视频如下：
手机端顶部查询动态变化
效果说明，在往上拖动内容时候，查询文本框会慢慢往上移动，替换logo，且头部高度会慢慢缩窄；从而可以节省空间，显示更多内容。html代码和css样式如下图：
实现原理：当拖动页面时候，监听scroll事件，同时获取scrollTop值赋予函数animate，利用scrollTop计算拖动时候，logo变化的属性（top和opacity）、搜索框变化的属性（width和top）和头部变化的属性（height），下图都有相应的信息备注，里面具体数字都是根据设计图情况调节，不是固定的。
滚动到才显示图片
效果说明，打开页面的时候只加载可视区域的图片，拖动过程才加载对应区域的图片，而不是一次性加载整个页面的全部图片，这样有利于加载好的页面更快地呈现在用户面前，减轻服务器压力（因为分批请求）；html代码和css样式如下图：
实现原理（利用懒加载方法和节流函数），循环遍历所有图片，只要该图片距离顶部的高度小于等于可视区域高度+滚动条距离顶部高度的图片就显示（赋值src）；所以需要监听滚动条（scroll），为了避免频繁触发事件，设置了延时触发（delay--防抖函数），这个延时时间内的定时器都会清除不执行，但这样懒加载函数（lazyLoad）将会不断被延时，所以设置了间隔时间，只要达到间隔时间（time）就执行懒加载函数（lazyLoad），从而实现效果又避免大量性能损失。
