在js中的瀑布流布局理解

一、瀑布流的理解

瀑布流
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的值就是最小列的高度 + gapitems[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;}```

在js中的瀑布流布局理解相关推荐

JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
js中的prototype的理解
2019独角兽企业重金招聘Python工程师标准>>> JS中的prototype是JS中比较难理解的一个部分 1 原型法设计模式在.Net中可以使用clone()来实现原型法原 ...
Js中函数式编程的理解
函数式编程的理解函数式编程是一种编程范式,可以理解为是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程与命令式编程最大的不同其实在于,函数式编程关心数据的映射,命令式编程关心解决问 ...
JS中对于prototype的理解
JS中的prototype是JS中比较难理解的一个部分本文基于下面几个知识点: 1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是,现在有1个类A,我想要创建一个 ...
Js中匿名函数的理解
目录 1.js中匿名函数的N种写法最常见的用法: 2.JavaScript 匿名函数及闭包 2.1 匿名函数 2.1.1 函数的定义 2.1.2 匿名函数的创建 2.2 闭包 2.3 举例 2.4 ...
JS中同步与异步的理解
你应该知道,javascript语言是一门"单线程"的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条 ...
js中回调函数的理解举例说明js回调函数
初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is passed as an arg ...
JS中[感叹号]function(){}()的理解
这种写法,是一种`立即执行函数`的写法,即IIFE等设计模式.这种函数在函数定义的地方就直接执行了. 理解IIFE设计模式的关键是要认识到,在ES6之前,JavaScript仅具有函数作用域(因此缺少 ...
js实现图片瀑布流布局
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...

在js中的瀑布流布局理解

在js中的瀑布流布局理解相关推荐

最新文章

热门文章