本文共 7537 字，大约阅读时间需要 25 分钟。
一、瀑布流的理解
-
瀑布流
1）图片的宽度固定，图片的长度不一样
2）当页面滚动时 ，会再次加载数据，动态的渲染在页面上
3）是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局
4）随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部
5）瀑布流的常见布局方式有三种，分别是等高等宽、等高不等宽和等宽不等高 -
瀑布流布局的原理
1）设置图片宽度一致
2）根据浏览器宽度以及每列宽度计算出列表个数，列表默认0
3）当图片加载完成，所有图片依次放置在最小的列数下面
4）父容器高度取列表数组的最大值 -
瀑布流的解决方案
1）对每一条显示数据使用绝对定位+浮动的方式，这样也会有一个问题----必须要知道每一条信息的具体高宽度
2）采用列布局，将每一条数据依次放置到每一列 -
瀑布流的具体实现步骤
1）首先瀑布流所有的图片应该保持宽度一致，高度是由内容决定。设置左浮动，通过定位的方式是我们实现瀑布流的最基本的原理，只要我们动态的设置它的top值、left值，就能让它排列
2）定位后确定浏览器显示区域内，一行能放多少列图片盒子，通过定位的方式，先排列第一行
获取页面的宽度
获取图片盒子的宽度
显示的列数 = 页面宽度/图片盒子宽度
column = pageWidth / itemWidth
3）为了美观我们可以加上一个空隙，通过定位的方式，先排列第一行中加空隙
显示的列数 = 页面宽度/(图片盒子宽度+间隙)
column = pageWidth / (itemWidth + gap)
4）确定列数之后，排列第一行
下面还有很多图片盒子，我们先要排列第1行，所以在for循环里就要判断一下，当i(所有图片盒子的索引) < column(显示列数)的时候，说明在第1行
知道在第1行之后，动态设置每个图片盒子的left值就能排好第1行
left = i * ( itemWidth + gap )
5）第1行排列好之后，获取第1行所有图片盒子的高度，排列第二行，获取盒子高度，存到数组中
需要定义一个数组arr，将获取到的高度存在数组中，因为第2行排列的时候需要考虑top值，此时只能根据第1行图片盒子的高度来设置
获取图片高度的时候要注意，程序必须写在入口函数onload里面，因为图片的加载特性是：等页面都加载完之后才去请求加载，所以不写在入口函数里可能会出现高度获取不到的情况
6）排列第2行
获取到刚刚数组中，高度最小的那一列，将第2行的第1个图片盒子放置在它的下方
此时的left值就是高度最小列的offsetLeft；top值就是：第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)
记录下高度最小列的索引index，后面计算会用到
设置完成之后，会发现后面所有的图片都叠在这个高度最小列的下面，原因就是此时的最小列高度没有改变，应该加上下面图片的高度，得出一个新高度
7）改变最小列当前高度
此时的这一列高度其实已经发生改变了，所以需要将新高度赋值给数组
当前高度最小列的高度 = 当前高度最小列的高度 + 间隙 + 下面图片盒子的高度
8）触发resize事件
将整个设置样式的部分封装成一个函数，在onload里面注册一个resize事件，只要页面一发生改变，就触发样式部分的代码。
实时改变pageWidth的宽度，这样瀑布流就会是一个响应式的效果了
9）懒加载效果
目前我们用的是多张图片，假如一个页面中有几百张图片的时候，我们不可能等到它都加载完再显示，所有这里引入一个懒加载的概念，我们规定最后一张为显示的最后一张图片，当滚动条滚动到最后张的时候，应该加载下一批图片
即页面可视区高度+滚动条卷去的高度 = 最后一张图片的offsetTop；的时候加载下面的图片
二、瀑布流的实现
- html部分
代码如下：
<div id="box"> <div class="item"><img src="./images/1.jpg" alt="loaing"></div> <div class="item"><img src="./images/2.jpg" alt="loaing"></div> <div class="item"><img src="./images/3.jpg" alt="loaing"></div> <div class="item"><img src="./images/4.jpg" alt="loaing"></div> <div class="item"><img src="./images/5.jpg" alt="loaing"></div> <div class="item"><img src="./images/6.jpg" alt="loaing"></div> <div class="item"><img src="./images/7.jpg" alt="loaing"></div> <div class="item"><img src="./images/8.jpg" alt="loaing"></div> <div class="item"><img src="./images/9.jpg" alt="loaing"></div> <div class="item"><img src="./images/10.jpg" alt="loaing"></div> <div class="item"><img src="./images/11.jpg" alt="loaing"></div> <div class="item"><img src="./images/12.jpg" alt="loaing"></div> <div class="item"><img src="./images/13.jpg" alt="loaing"></div> <div class="item"><img src="./images/14.jpg" alt="loaing"></div> <div class="item"><img src="./images/15.jpg" alt="loaing"></div> <div class="item"><img src="./images/16.jpg" alt="loaing"></div> <div class="item"><img src="./images/17.jpg" alt="loaing"></div> <div class="item"><img src="./images/18.jpg" alt="loaing"></div> <div class="item"><img src="./images/19.jpg" alt="loaing"></div> <div class="item"><img src="./images/20.jpg" alt="loaing"></div> <div class="item"><img src="./images/22.jpg" alt="loaing"></div> <div class="item"><img src="./images/23.jpg" alt="loaing"></div> <div class="item"><img src="./images/24.jpg" alt="loaing"></div> <div class="item"><img src="./images/25.jpg" alt="loaing"></div> <div class="item"><img src="./images/26.jpg" alt="loaing"></div> <div class="item"><img src="./images/27.jpg" alt="loaing"></div> <div class="item"><img src="./images/28.jpg" alt="loaing"></div> <div class="item"><img src="./images/29.jpg" alt="loaing"></div> <div class="item"><img src="./images/30.jpg" alt="loaing"></div></div>2.css部分
代码如下：
* { padding: 0; margin: 0; position: relative; } .item { box-shadow: 2px 2px 2px #999; position: absolute; } img { width: 220px; display: block; }- js部分
代码如下：
// 获取元素 var box = document.getElementById("box"); var items = box.children; // 定义每一列之间的间隙为10像素 var gap = 10; window.onload = function(){ // 一进来就调用一次 waterFall(); /* * 函数功能：封装瀑布流函数 */ function waterFall(){ // 确定列数 var pageWidth = getClient().width; var itemWidth = items[0].offsetWidth; var columns = parseInt(pageWidth/(itemWidth+gap)); var arr = []; for(var i=0;i<items.length;i++){ if(i<columns){ // 确定第一行 items[i].style.top = 0; items[i].style.left = (itemWidth+gap)*i+"px"; arr.push(items[i].offsetHeight); }else{ // 其它行 // 找到数组中的最小高度以及它的索引 var minHeight = arr[0]; var index = 0; for(var j=0;j<arr.length;j++){ if(minHeight>arr[j]){ minHeight = arr[j]; index = j; } } // 设置下一行的第一个盒子的位置 // top的值就是最小列的高度 + gap items[i].style.top = arr[index] + gap + "px"; // left的值就是最小距离左边的距离 items[i].style.left = items[index].offsetLeft + "px"; // 修改最小列的高度 // 最小列的高度 = 当前的高度 + 拼接的高度 + 间隙的高度 arr[index] = arr[index] + items[i].offsetHeight + gap; } } } /* * 函数功能：页面尺寸改变时实时触发 */ window.onresize = function(){ waterFall(); }; /* * 函数功能：当加载到第三十张的时候 */ window.onscroll = function(){ if(getClient().height + getScrollTop() >= items[items.length-1].offsetTop){ // 模拟ajax 获取数据 var datas = [ "./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg", "./images/5.jpg", "./images/6.jpg", "./images/7.jpg", "./images/8.jpg", "./images/9.jpg", "./images/10.jpg", "./images/11.jpg", "./images/12.jpg", "./images/13.jpg", "./images/14.jpg", "./images/15.jpg", "./images/16.jpg", "./images/17.jpg", "./images/18.jpg", "./images/19.jpg", "./images/20.jpg", ]; for(var i=0;i<datas.length;i++){ var div = document.createElement("div"); div.className = "item"; div.innerHTML = '<img src="' + datas[i] + '" alt="">'; box.appendChild(div); } waterFall(); } }; }; /* * 函数功能：clientWidth 处理兼容性 */ function getClient(){ return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } } /* * 函数功能：scrollTop 处理兼容性 */ function getScrollTop(){ return window.pageYOffset || document.documentElement.scrollTop; } ```发表评论
最新留言
关于作者
