java瀑布流_⼀个简单的瀑布流实现。
瀑布流简介
主要是运⽤Html+CSS+JavaScript(DOM对象和window对象)来实现⼀个瀑布流，最终效果是在页⾯中滚动⿏标不断地加载图⽚永远划不到头，像百度图⽚这样的，在没有设置分页的的情况下，当滚动滚动条的时候页⾯从数据库源源不断的加载图⽚呈现在页⾯中。如下图所⽰:
瀑布流实现⽅法
本章要介绍的是加载瀑布流的⽅法是，固定列数的浮动布局，根据你设备屏幕的宽度和加载图⽚的宽度来固定列数，之后⼜获取每⼀列图⽚的⾼度，将要加载的图⽚放在⾼度最⼩的那⼀列图⽚下⾯，循环数组不断的寻⾼度最⼩的那⼀列图⽚，将图⽚放在下⾯实现基本的布局效果。然后再创建⼀个滚动条监听事件(当最后⼀张图⽚距顶的⾼度
基本的操作步骤如下:
在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容器，和标签，并且分别修改图⽚的名称，将准备的所有图⽚都加载进来，如果
你需要引⽤代码，就修改⼀下相关的图⽚路径。
设置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。
在函数中⽤ElementById("");`获container所对应的div元素。
再调⽤另⼀个函数 get_child_element("","")，来获取所有的box所对应的div元素。在函数中⾸先定义⼀个数组content_array =[]，通过ElementsByTagName("*")获取container对应div的所有⼦元素，并储存到数组all_content[]中，此时历遍all_content[]数组⽤all_content[i].className == box做⼀个判断，将className == box的放⼊数组content_array = []中并返回content_array = []数组。
固定宽度和居中对齐css布局左边固定右边自适应
前⼀节已经获取了图⽚，本节通过调⽤⼀个函数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
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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。