本文介绍瀑布流布局的实现思路，包括图片等宽不等高的设定，使用javascript进行布局和动态加载。首先定义了main和box的CSS样式，然后通过js计算屏幕宽度确定列数，设置main宽度，利用绝对定位为每个box定位。文章提到在窗口缩小时，不同方法对布局的影响，并提供了一个获取所有box元素的函数。当图片一半进入视口时触发加载新图片。作者已在github上分享原生js代码，并计划进行面向对象的封装和进一步的实现。
在本文里，瀑布流定义为图片等宽不等高，随着滚动条的下拉，在满足一定的情况下，加载图片。
先说说我的思路：瀑布流是规定的等宽不等高的瀑布流，在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是获取对象可见宽度，当浏览器变小的时候&#
最低0.47元/天 解锁文章
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
