瀑布流简介
主假如应用Html+CSS+JavaScript（DOM对象和window对象）来完成一个瀑布流，终究效果是在页面中转动鼠标不停地加载图片永久划不到头，像百度图片如许的，在没有设置分页的的情况下，当转动转动条的时刻页面从数据库络绎不绝的加载图片呈如今页面中。以下图所示:
瀑布流完成要领
本章要引见的是加载瀑布流的要领是，牢固列数的浮动规划，依据你装备屏幕的宽度和加载图片的宽度来牢固列数，之后又猎取每一列图片的高度，将要加载的图片放在高度最小的那一列图片下面，轮回数组不停的寻觅高度最小的那一列图片，将图片放在下面完成基础的规划效果。然后再建立一个转动条监听事宜（当末了一张图片距顶的高度<屏幕的高度+转动条转动的间隔）时，就触发我们在页面动态的增加图片的事宜（用JavasSript在Html DOM建立节点，并为其增加根元素）。
基础的操纵步骤以下:
在Html页面中建立承载图片的div
将预备的图片都加加载到页面中
为图片增加css款式
猎取第一排每一列图片的高度
牢固一排图片的宽度而且居中对齐
将图片放在第一排高度最小的列下面
改别图片高度并不停的轮回获得高度最小的图片
转动条监听事宜
建立Json字符出模仿数据
10. 动态的建立节点并为其增加根元素
11. 调解动态图片的花样
建立承载图片的div容器
起首建立一个能够承载一切图片的div容器，设置id=”container”
建立一个能够承载单个图片的div容器，设置class=”box”
建立一个div容器来设置图片的边框效果，使款式越发雅观，设置class=”box_img”
用img标签来加载图片
示意图以下所示:
加载图片
在这里我预备的是一些关于宫崎骏动画的图片作为完成瀑布流的素材，起首在 id=”container”的div容器中加载图片，复制id=”box”承载单个图片的div容器，以及他的子元素id=”box_img”边框div容器，和<img>标签，而且离别修正图片的称号，将预备的一切图片都加载进来，假如你须要援用代码，就修正一下相干的图片途径。
设置css款式
上一讲加载进来的图片是在左侧排成一列，这一讲用css来设置他的规划和款式
起首用通配符”*”来设置页面中一切Html标签的一切内边距padding:0px和外边距margin:0px,选用通配符是由于它的优先级比一切其他选择器都要低（id选择器>类选择器>Html选择器>通配符选择器）
设置id=”container”相对定位，
设置id=”box”的div容器外边距padding:5px，能够获得两种图片间的间隔为10px,设置浮动float:left为向左浮动，让它一次规划排开
设置id=”box_img”外边距padding和边框border和暗影box-shadow圆角border-radius的效果，
设置图片的宽度width:150和高度height:auto自顺应
猎取图片
运用float规划有个瑕玷，当浏览器窗口的大小转变时，在页面中的图片会顺应窗口来从新排列规划会带来一些不必要的贫苦，而这类效果应当运用相应式规划来完成。从本节课最先就是用JavaScript规划和转变Html中的一些款式和规划。本节操纵是运用JavaScript的window对象来猎取装备窗口的宽度和图的宽度，终究获得摆放图片的列数，然则在此之前要先获得一切的图片。
操纵步骤详解
先经由过程函数img_location(“container”,”box”);来猎取一切的图片，而且传入参数container和box。
在函数顶用document.getElementById(“”);`获container所对应的div元素。
再挪用另一个函数 get_child_element(“”,””),来猎取一切的box所对应的div元素。在函数中起首定义一个数组content_array =[]，经由过程container.getElementsByTagName(“*”)猎取container对应div的一切子元素，并储存到数组all_content[]中，此时历遍all_content[]数组用all_content[i].className == box做一个推断,将className == box的放入数组content_array = []中并返回content_array = []数组。
牢固宽度和居中对齐
前一节已猎取了图片，本节经由过程挪用一个函数get_width(dparent, dcontent)来牢固列数，个中dparent和dcontent是传过来的两个参数，
在函数中先用img_width = dcontent[1].offsetWidth;获得图片的宽度,
用 win_width = document.documentElement.clientWidth;猎取当前装备的宽度
用Math.floor(装备的宽度/图片宽度)函数将效果转化为整数,即图片的列数
设置第一排图片的宽度=这个整数*图片宽度，即牢固列数
用JavaScript(DOM中的style)设置图片居中对齐
图片规划
就获得的图片规划的效果来看，并非我们所想要的图片规划，由于它每一排的高度是由着一排中高度最高的图片所决议，在图片高度小的地区就会涌现大批的空缺。
而我们要完成的效果是，第一排后的第一张图片放在第一排中高度最小的那一列图片下面，然后图片与这一列相加，转变这一列的团体高度。再让下一张图片再去寻觅第一排中高度最小的那一列图片，将图片放在这一列图片下面，转变这一列图片的高度，以此类推，将一切图片都规划在页面中。
在完成终究效果之前，要先猎取第一排一切图片的高度，和个中高度度最小的图片，并将第一排今后的一切图片都放在高度最小的图片背面。
猎取最小高度图片
挪用函数min_image_locatin(dec_width,dcontent)个中参数 dec_width是在上一节中，将返回的列数值
声明一个数组box_height_array[i]寄存第一排一切图片的高度
用for轮回历遍一切的图片，用if（i<dec_width)做一个推断，猎取第一排一切图片的高度
box_height_array[i] = dcontent[i].offsetHeight; //获得第一排图片的高度
用函数Math.min.apply(null, box_height_array)猎取第一排图片中高度最小的图片
挪用一个函数get_min_height(box_height_array, min_height)猎取高度最小图片的位置，在函数中历遍一切图片将高度即是最小高度的图片返回
用JavaScript(DOM对象中的style属性)设置图片为相对定位，和图片距顶的间隔和距左的间隔
图片规划
要完成的效果是将第一排后的第一张图片放在第一排中高度最小的那一列图片下面，然后图片与这一列相加，转变这一列的团体高度。再让下一张图片再去寻觅第一排中高度最小的那一列图片，将图片放在这一列图片下面，转变这一列图片的高度，以此类推，将一切图片都规划在页面中。
用下面的要领来转变高度最小的列的高度，然后轮回数组从新寻觅高度最小的列
box_height_array[min_index] = box_height_array[min_index] + dcontent[i].offsetHeight;
更多的内容和瀑布流现实的动态效果能够接见：http://www.hubwiz.com/course/55f7c75298b791ab0ca201d7/
