瀑布流思路及源码

在本文里，瀑布流定义为图片等宽不等高，随着滚动条的下拉，在满足一定的情况下，加载图片。

先说说我的思路：瀑布流是规定的等宽不等高的瀑布流，在html中，分别是parent-div：main，child-div:box，box中有div：pic；pic放img。css内，main是相对定位，box是绝对定位。

主要说的是js，html和css的代码很少。

写到js，第一步：思考等宽的图片怎样布局，第一行排列后，第二行怎样排列；第二步：怎样对每一个box定位；第三部：怎样让图片不断加载

1：因为图片等宽，那么你需要判断整个页面显示的列数，我的思路是用屏幕宽度window.screen.width/图片宽度，取整。但是amy老师用clientWidth/图片宽度，得到列数。document.documentElement.clientWidth是获取对象可见宽度，当浏览器变小的时候，宽度也会改变的，我在Firefox和chrome上测试图片会掉下来，但是amy老师的就不会，有点晕。待我细细看看。

2：需要设置main的宽度，box在main内，如果main的宽度不固定，窗口变小时候，图片会掉下来，main的宽度既可以为列数*图片宽度。

    3：第二行的图片是添加在第一行最短的图片的后面，以此类推。所以我们需要for循环，遍历所有的box，这里js需要单独封装一个函数，用以获取所有main下的classname为box的div。定义数组存放高度值，box需要存放的位置是top：XXpx，left：图片宽度*偏移个数。绝对定位。并且需要改变数组中的值。

   4：图片加载，当最后一张图片的一半出现在屏幕里的时候，开始加载图片。

大致思路就是这样，我在github上上传了代码，不过width这一点没有改过来。这个是js原生代码，下面会用jquery和css3再写一个。最后会用面向对象封装一下，直接调用，准备写个系列出来。https://github.com/betterwl/waterfall/commits/master代码在这里点击打开链接

先在文中感谢慕课的amy老师，我是跟着她的思路走的。图片是下载一个网站上的，只是自己练手，应该不是盗用吧。

学前端的小白一枚，希望大神指教。