# 瀑布流思路
1.获取屏幕的width,看一排能放置几个box
2.对所有的box遍历,将一排box,放入一个数组
~~~
box.forEach(function(value,index){
if(index<num){
arr.push(value.offsetHeight)
}
})
~~~
3.从高度最小的下标位置,放置图片（使用定位 left=最小高度图片的offsetLeft top=数组.indexOf(minHeight)）
~~~
left=minIndex-->offsetLeft
top=minHeight
~~~
4.对数组的最小位置的值进行从新设置
5.当scrollHeight+clientHeight>最后一个元素距离顶部高度+自身高度一边时滚动
### 代码如下：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/index.js"></script>
<style>
* {
margin: 0;
padding: 0
}
img {
width: 230px;
padding: 5px;
vertical-align: bottom;
}
.box {
/* position: relative; */
float: left;
width: 240px;
border: 1px solid rgba(51, 51, 51, 0.1);
border-radius: 5px
}
#container {
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="images/01.jpg" alt="">
</div>
<div class="box">
<img src="images/02.jpg" alt="">
</div>
<div class="box">
<img src="images/03.jpg" alt="">
</div>
<div class="box">
<img src="images/04.jpg" alt="">
</div>
<div class="box">
<img src="images/05.jpg" alt="">
</div>
<div class="box">
<img src="images/06.jpg" alt="">
</div>
<div class="box">
<img src="images/07.jpg" alt="">
</div>
<div class="box">
<img src="images/08.jpg" alt="">
</div>
<div class="box">
<img src="images/09.jpg" alt="">
</div>
<div class="box">
<img src="images/10.jpg" alt="">
</div>
<div class="box">
<img src="images/11.jpg" alt="">
</div>
<div class="box">
<img src="images/12.jpg" alt="">
</div>
</div>
<script>
window.onload = function () {
var url = {
dataUrl: [{
src: "01.jpg"
}, {
src: "02.jpg"
}, {
src: "03.jpg"
}, {
src: "04.jpg"
}, {
src: "05.jpg"
}, {
src: "06.jpg"
}, {
src: "07.jpg"
}, {
src: "08.jpg"
}, {
src: "09.jpg"
}, {
src: "10.jpg"
}, {
src: "11.jpg"
}, {
src: "12.jpg"
}]
}
var container = document.getElementById("container");
var box = document.getElementsByClassName("box");
//放置图片
place_img();
//当滚动条滚动时执行函数
window.onscroll = function () {
//判断是否到达底部
if (sCondition()) {
//添加img元素
scrollShow();
}
}
function scrollShow() {
var arr = url.dataUrl;
for (var i = 0; i < arr.length; i++) {
var box = document.createElement("box");
box.className = "box";
// 创建img元素
var img = document.createElement("img");
//img内容
img.setAttribute("src", "images/" + arr[i].src);
//添加img元素
box.appendChild(img);
container.appendChild(box);
place_img();
}
}
function place_img() {
// 1.获取屏幕的width,看一排能放几张图片
var dw = window.innerWidth;
var boxWidth = box[0].offsetWidth;
var num = Math.floor(dw / boxWidth)
container.style.width = boxWidth * num + "px";
// 2.获取前五张图片的height,将其存入一个数组
var box_arr = Array.prototype.slice.call(box, 0);
var height_arr = []
box_arr.forEach(function (value, index) {
if (index < num) {
var height = value.offsetHeight;
height_arr.push(height);
} else {
// 3.从数组中高度最小的地方开始放置图片
var minHeight = Math.min(...height_arr);
var minIndex = height_arr.indexOf(minHeight);
var offsetLeft = box[minIndex].offsetLeft;
box_arr[index].style.position = "absolute";
// left为最大高度位置图片的offsetLeft
box_arr[index].style.left = offsetLeft + "px";
// top为最小高度
box_arr[index].style.top = minHeight + "px"
// 4.重新设置最小位置的高度
height_arr[minIndex] += box_arr[index].offsetHeight;
}
})
}
//当滚动条在最底部时的判定条件
function sCondition() {
//滚动条距离顶部的高度
var sH = document.documentElement.scrollTop;
//可视区域的高度
var cH = document.documentElement.clientHeight;
var lastH = box[box.length - 1].offsetTop + box[box.length - 1].offsetHeight / 2;
return (sH + cH > lastH) ? true : false;
}
}
</script>
</body>
</html>
~~~
- JavaScript介绍
- js基本语法
- 调试方法
- 标识符
- 数据类型(基本，引用）
- 基本数据类型
- 引用数据类型
- 严格模式.
- 全局变量和局部变量
- DOM 节点
- DOM 改变元素内容（样式 内容）
- 节点改变元素内容（通过父子节点找到元素然后操作）
- 添加元素
- 设置 移除 属性
- DOM下的事件
- 知识点整理
- 异步
- Ajax
- this指向问题
- 设备类型检测（手机 平板 电脑）
- 函数
- 函数的参数
- 重载
- 数据类型
- 构造函数
- 返回上一个网页
- 数组 （重点）
- 增加数组内容
- 删除数组元素
- 复制数组
- 修改数组元素（功能强大实现 增 删 改）
- 数组元素查询
- 数组遍历
- 最值
- 展开语法
- join
- 排序问题
- 求和
- 颠倒数组
- 判断是不是一个数组
- 二维数组
- 数组和字符串之间转换
- 数组去重
- 将jquery对象转为javascript对象
- 元素偏移量
- 获取一个元素距离顶部的距离
- 可视区域宽高
- 布局视口 （移动设备）
- 文档碎片
- 表格中的 thead tbody
- 获取元素宽度
- 滚动区域宽高
- div滚动条设置
- 使用 offsetWidth 设置父元素宽度和子元素宽度之和一样
- 字符串的方法
- js功能实现
- 点击显示 隐藏
- 点击变色 兄弟元素隐藏.
- 点击显示隐藏区域.
- 兼容性问题.
- 选择按钮,
- 获取外部样式
- 点击弹出下标
- 通过属性改变img 的src
- 小米登录 es6实现js
- try catch
- 小米登录es5实现js
- js实现导航栏点击加载多个页面
- js实现网页之间的跳转和在指定div加载页面
- iframe 高度实现自适应
- js 获取滚动条距离顶端的距离
- jQuery animate() 方法 动画效果
- fade（js实现遮罩层渐变色）
- js轮播实现
- 超哥轮播js
- 轮播动画原理
- 数组实现瀑布流
- 电子表计时器date
- 从豆瓣接口上取数据实现搜索功能（重点！！！！）
- 封装
- 不使用js-ajax 使用VueResource实现数据请求
- 需要常看的知识点
- 移动端响应布局rem
- rem+vw
- 原型
- JS的模块化如何解决
- ES5和ES6模块化写法
- js内置对象
- 结构赋值es6
- 字符串模板 分割字符串
- 谈基本数据类型中的方法（本不带有方法）
- Math
- date
- 正则
- 备选字符集
- 连号的备选字符集
- replace() 查找替换（过滤）
- 量词
- 不确定的数量
- search找下标
- test()检验是否包含正则表达式
- 实例
- 验证电话号码
- 邮箱验证
- 将指定内容过滤（天猫 淘宝）
- 预定义字符集（简化）
- 严格匹配 ^ $
- Ajax
- http get post
- $.get()和$.post()详解
- jquery-ajax 数据请求
- 使用Vue Ajax在网页中渲染数据
- axios向服务器端get，post数据（重点）
- 跨域
- 原生Ajax
- 原理步骤 json解析字符串
- 多态
- js中的面向对象
- js中的类和继承
- 原型和原型链
- 参数表达式
- 字符串中常用的方法
- mock.js
- scrollReveal 滚动显示
- Node.js模块里exports与module.exports的区别