1.先布置好结构:
(1)把框架搭好
1.头部导航栏
2.尾部结构
3.spa分页:通过;load添加body中的各个页面用location.search在导航栏的a标签的href中的p值添加不同的路径,然后利用短路默认显示home的页面
4.通过ajax请求获取数据:1.接口地址2.请求的数据解构3.通过模板字符串返回一个html的结构3.添加css样式,把页面整体样式美化
5.通过for循环生成每一页的页数然后通过冒泡事件机制和jquery的append方法把生成的页数添加到页面上,正在显示的页数用高亮显示,然后设置一个最大最小页数,和使最小值不小于1,最大值不超过总页数,然后通过点击上一页,下一页来点击active的上一个li和下一个li
6.滑动加载更多,先设置一个值作为存储的偏移量,然后通过获取窗口高和内容高来设置一个值保存触底的偏移量,当偏移量>触底偏移量时触发页数加一然后加载下一个页面,一般会通过减少触底偏移量来提前触发加载下一个页面
7.瀑布流布局通过绝对定位,通过固定宽度然后通过比例算出每张图片的宽度,然后通过each方法遍历当前的元素(方便控制每个li元素的位置),把遍历的元素封装成jquery对象,通过index属性,先写出前四个li元素的位置,添加到一个空数组,然后通过数组查询出最小的那个高度,然后下一个元素添加到最低的那个元素上,当最小元素所在列 添加新的元素之后,从数组中替换掉这一列的最小元素