3-3视频中瀑布流的问题

你好同学 ,问题解答如下:

1. boxes.length不会变化的 , 因为boxes获取页面加载时最初的18个盒子 ,如下代码:

2.瀑布流图片的位置是根据上一行图片最小宽度决定的 , 例如第一行高度最小的图片是第六张图片 ,所以第二行的第一张也就是第七张图片定位在它下面 . 

所以如下代码中 , 并获取每行图片的高度传递给如下函数getIndex , 然后找到最小图片的索引

3. 如下代码中就是js为图片设置定位 , top值和left值的语法 ,

 everyHeight[minIndex] += boxes[i].offsetHeight + 20; 是给每个盒子设置高度height . 

当如上第二条找到最小高度的图片索引后 ,那么根据索引设置下一行第一张要在它下面 ,然后下一次for循环( 同学可以看到代码是写在for循环中的 )  , 就会再剩下的图片中再找到最小高度的索引值 , 再让下一行的第二张图片定位到下面 .,依次循环直到排列完毕 ....

这一块不好理解 , 建议同学在看着视频 ,自己敲一下代码 , 能够帮助自己更好的理解哦.

祝学习愉快 ,望采纳