摘要：瀑布流简介主要是运用对象和对象来实现一个瀑布流，最终效果是在页面中滚动鼠标不断地加载图片永远划不到头，像百度图片这样的，在没有设置分页的的情况下，当滚动滚动条的时候页面从数据库源源不断的加载图片呈现在页面中。
瀑布流简介
主要是运用Html+CSS+JavaScript（DOM对象和window对象）来实现一个瀑布流，最终效果是在页面中滚动鼠标不断地加载图片永远划不到头，像百度图片这样的，在没有设置分页的的情况下，当滚动滚动条的时候页面从数据库源源不断的加载图片呈现在页面中。如下图所示:
本章要介绍的是加载瀑布流的方法是，固定列数的浮动布局，根据你设备屏幕的宽度和加载图片的宽度来固定列数，之后又获取每一列图片的高度，将要加载的图片放在高度最小的那一列图片下面，循环数组不断的寻找高度最小的那一列图片，将图片放在下面实现基本的布局效果。然后再创建一个滚动条监听事件（当最后一张图片距顶的高度<屏幕的高度+滚动条滚动的距离）时，就触发我们在页面动态的添加图片的事件（用JavasSript在Html DOM创建节点，并为其添加根元素）。
基本的操作步骤如下:
在Html页面中创建承载图片的div
将准备的图片都加加载到页面中
为图片添加css样式
获取第一排每一列图片的高度
固定一排图片的宽度并且居中对齐
将图片放在第一排高度最小的列下面
改别图片高度并不断的循环获得高度最小的图片
滚动条监听事件
创建Json字符出模拟数据
10. 动态的创建节点并为其添加根元素
11. 调整动态图片的格式
首先创建一个能够承载所有图片的div容器，设置id="container"
创建一个能够承载单个图片的div容器，设置class="box"
创建一个div容器来设置图片的边框效果，使样式更加美观，设置class="box_img"
用img标签来加载图片
示意图如下所示:
在这里我准备的是一些关于宫崎骏动画的图片作为实现瀑布流的素材，首先在 id="container"的div容器中加载图片，复制id="box"承载单个图片的div容器，以及他的子元素id="box_img"边框div容器，和标签，并且分别修改图片的名称，将准备的所有图片都加载进来，如果你需要引用代码，就修改一下相关的图片路径。
上一讲加载进来的图片是在左边排成一列，这一讲用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] = dcontent[i].offsetHeight; //取得第一排图片的高度 用函数Math.min.apply(null, box_height_array)获取第一排图片中高度最小的图片 调用一个函数get_min_height(box_height_array, min_height)获取高度最小图片的位置，在函数中历遍所有图片将高度等于最小高度的图片返回 要实现的效果是将第一排后的第一张图片放在第一排中高度最小的那一列图片下面，然后图片与这一列相加，改变这一列的整体高度。再让下一张图片再去寻找第一排中高度最小的那一列图片，将图片放在这一列图片下面，改变这一列图片的高度，以此类推，将所有图片都布局在页面中。 用下面的方法来改变高度最小的列的高度，然后循环数组重新寻找高度最小的列 更多的内容和瀑布流实际的动态效果可以访问：http://www.hubwiz.com/course/55f7c75298b791ab0ca201d7/
声明一个数组box_height_array[i]存放第一排所有图片的高度
用for循环历遍所有的图片，用if（i
用JavaScript(DOM对象中的style属性)设置图片为绝对定位，和图片距顶的距离和距左的距离
box_height_array[min_index] = box_height_array[min_index] + dcontent[i].offsetHeight;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111161.html
摘要：是规则的瀑布流。普通的尺寸会出现错位的问题索引这个是右边这个是左边间距解决办法，可以通过里的来判断，这个方法不管你高度怎样，他都是左右左右开始排列的。 目录介绍 01.规则瀑布流实现02.不规则瀑布流实现2.1 实现方式2.2 遇到问题03.瀑布流上拉加载04.给瀑布流设置分割线05.自定义Manager崩溃06.如何避免刷新抖动07.为何有时出现跳动08.瀑布流图片优化09.onBi...
摘要：两行如下分几列不留白，不知道什么意思可以取消这个样式试试列间距，可有可无，默认效果图如下说明不存在一边列表过长问题，很均匀，没有缺点抱歉有坑但可以一链代码解决这个列表显示顺序是左边右边，不符合正常展示逻辑然后可以使用对数据进行预处 两行css如下: .waterfall-container { /*分几列*/ column-count: 2; } .w...
摘要：两行如下分几列不留白，不知道什么意思可以取消这个样式试试列间距，可有可无，默认效果图如下说明不存在一边列表过长问题，很均匀，没有缺点抱歉有坑但可以一链代码解决这个列表显示顺序是左边右边，不符合正常展示逻辑然后可以使用对数据进行预处 两行css如下: .waterfall-container { /*分几列*/ column-count: 2; } .w...
摘要：两行如下分几列不留白，不知道什么意思可以取消这个样式试试列间距，可有可无，默认效果图如下说明不存在一边列表过长问题，很均匀，没有缺点抱歉有坑但可以一链代码解决这个列表显示顺序是左边右边，不符合正常展示逻辑然后可以使用对数据进行预处 两行css如下: .waterfall-container { /*分几列*/ column-count: 2; } .w...
瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度 还要结合在子容器中...
阅读 912·2021-11-22 13:54
阅读 2841·2021-09-28 09:36
阅读 2979·2019-08-30 15:55
阅读 1950·2019-08-30 15:44
阅读 542·2019-08-29 12:31
阅读 2563·2019-08-28 18:18
阅读 1197·2019-08-26 13:58
阅读 1381·2019-08-26 13:44
