前端开发的过程中难免会遇到瀑布流布局的需求，接下来我就给大家展示代码然后与大家一起分析

首先你的目录结构可以和笔者保持一致：

JS笔者单独封装了一个小的工具，用来获取DOM元素
tools.js代码如下：

/*** 解决根据类名查找元素的兼容问题* @param className 待查找的类名* @param context 可选，查找元素的上下文：即在指定的 context 元素后代查找，该参数不传递，则默认为 document* @return 查找到的元素集合（HTMLCollection 或 Array）*/
 function getElementsByClassName(className, context) {// 未传递 context 这个参数，则默认为 documentcontext = context || document;// 如果浏览器本身就支持使用 document.getElementsByClassName 方法，则直接调用if (context.getElementsByClassName) // 支持使用return context.getElementsByClassName(className);/* 不支持使用 */// 定义数组保存查找结果var result = [];// 查找所有元素var elements = context.getElementsByTagName("*");// 遍历所有元素for (var i = 0, len = elements.length; i < len; i++) {// 将当前遍历到元素的类名获取到var classNames = elements[i].className.split(" ");// 遍历当前元素的所有类名for (var j = 0, l = classNames.length; j < l; j++) {// 判断当前遍历到的类名是否和待查找的类名一致if (classNames[j] === className) {// 有相同，则说明当前遍历到的元素是待查找的元素result.push(elements[i]);break;}}}// 将查找结果返回return result;
 }
 /*** 根据选择器查找元素* @param selector 选择器   #id    .className   element* @param context 可选，查找元素的上下文：即在指定的 context 元素后代查找，该参数不传递，则默认为 document* @return 返回根据选择器查找到的元素*/
 function $(selector, context) {// 默认在文档中查询context = context || document;if (selector.indexOf("#") === 0) // idreturn document.getElementById(selector.slice(1));if (selector.indexOf(".") === 0) // className，调用自定义的函数解决根据类名查找元素兼容问题return getElementsByClassName(selector.slice(1), context);// elementreturn context.getElementsByTagName(selector);
 }
 

images文件夹里面放到的就是事例图片，你可以随意找N张图片放到images文件夹里面
CSS样式笔者是直接写到html里面了，你也可以单独提取出来。
index.html代码如下：

代码的解读笔者都标记到代码的注释当中咯，如果还有不懂的直接评论留言就可以了哦，快快动手搞写图片试试效果吧！
最后附上笔者的效果图！

全是美女，哈哈！养眼吧!