调试流程

js执行了，但是样式不对：

1.先看核心代码最外部调用代码

image.png

2.再看内部函数getData()

image.png
3.在success里 console出来结果了，再往下找。console这里的结果，发现也是对的
image.png

4.继续往下找，此时只剩瀑布流。这是去看start方法，发现里面有很多计算出来的变量还和宽度相关，这时就需要将这些变量console出来，看看是否有计算错误

image.png
5.代码里的this.$ctWidth，按字面意思应该是具体数值，说明这里有问题
image.png
这句话，等号右边的意思是 给$ct 重新设置宽度，去了赋值 这话意思就是改变$ct的宽度

• $node.css( 'display', 'none' )，这么写意思是给 node 设置css
• a = $node.css( 'display', 'none' ) ，这种赋值语句没用。既然没用写了 后期可能就会存在bug
  image.png
  直接改变$ct的宽度
  image.png
  image.png
  6.现在跑通了 继续往下看
  image.png
  image.png
  此处没问题继续往下看
  image.png
  把能打印的都给打印出来调试
  image.png
  undeifined 发现是start里那个变量名字的问题，就是刚才的变量itemWidth
  7.现在瀑布流逐渐正常，接下来调整图片高度。图片大说明很可能是css写错了。这时候就用 “审查元素” 去看看
  image.png
  image.png
  image.png
  养成习惯，当 a 标签作为容器时，写上 display: block 要不它行内元素，没盒子的特性了
  image.png
  看 block时，蓝色是a标签 全部的
  image.png
  去掉block，高度就没了。这个会引起 点击事件不生效的bug
  这里的width没有px
  image.png
  image.png
  8.css更改后可以跑通了，这里发现ajax请求的都是一个页面
  image.png
  console中发现请求了8次，执行的没有那么多次。函数未做节流处理（滑到底部请求的时候，给上个锁，免得一直往下划会一直请求，请求成功时，再把锁置为false就行）
  image.png

image.png
image.png
image.png
因为可能会请求失败，请求失败也算请求结束，所以得写个error的回调
image.png
image.png
这回再console 会发现在出来结果之前，只能执行一次
image.png
如果lock为真，则啥也不做跳出去，否则上个锁 开始请求 一开始是false 所以不跳出，给lock设置为true，这时候发送请求，请求返回结果之前，lock一直都是true 。所以这时多次滑动就会一直都是跳出函数 当请求成功了，lock设置为false，这时候一切和一开始一样了，可以继续发请求了
image.png