瀑布流软加载

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

body {

background: #f1f1f1;

}

img {

display: block;

}

.waterfall .box {

padding-right: 10px;

padding-bottom: 10px;

position: absolute;

transition: left .5s, top .5s;

/* background: white; */

}

.waterfall .box img {

250px;

}

.waterfall .box p {

background: white;

height: 30px;

line-height: 30px;

}

.waterfall .box p span {

font-size: 12px;

color: #666;

}

.waterfall .box p a {

font-size: 12px;

color: #444;

text-decoration: none;

}

.waterfall .box p a:hover {

background: #e5461c;

color: #fff;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

function waterfall() {

//取得所有盒子

var boxes = document.querySelectorAll('.waterfall .box');

var boxW = boxes[0].offsetWidth

var col = Math.floor(window.innerWidth / boxW);

var heightArray = [];

for (var i = 0; i < boxes.length; i++) {

if (i < col) {

//第一行

boxes[i].style.top = 0;

boxes[i].style.left = i * boxW + 'px'

heightArray.push(boxes[i].offsetHeight);

} else {

//其他行

// 1. 找到数组的最小值

// 使用展开运算符...，将nums展开，之后，传递给Math.min(),就可以取得最小高度

var minH = Math.min(...heightArray);

var minIndex = heightArray.indexOf(minH);

boxes[i].style.top = minH + 'px'

boxes[i].style.left = minIndex * boxW + 'px'

heightArray[minIndex] = minH + boxes[i].offsetHeight;

}

console.log(heightArray)

}

//页面大小改变，或者是zoom改变时，会触发onresize

window.onresize = window.onload = function () {

//在这个事件中调用waterfall()可以保证布局发生在所有的图片下载完成之后。

waterfall()

}

window.onscroll = function () {

if (needLoad()) {

//加载数据

loadData();

}

function needLoad() {

//返回true需要加载，返回false不需要

let lastBox = document.querySelector('.box:last-of-type');

//取得这个盒子距离可视区顶端的距离

let dist = lastBox.getBoundingClientRect().y

// return dist<= window.innerHeight ? true : flase

return dist <= window.innerHeight

}

var start;

function loadData() {

//ajax获取数据

var now = new Date(); //每次调用loadData，都取得一个当前时间

if (!start || now - start > 1000) {

//start等于未定义，就是这第一次调用loadData

start = now; //计时开始

let xhr = new XMLHttpRequest();

xhr.open('get', './imgs.json', true)

xhr.onload = function () {

if (this.status >= 200 && this.status < 300) {

//取得数据

// console.log(this.responseText)

let imgs = JSON.parse(this.responseText)

//直接在修改完DOM树后，调用waterfall()，会因为图片还没下载完成导致布局的错误。

//我们需要等待这30张图片加载完成，再调用waterfall

//我们只需要监听每个图片加载完成的事件，并在时间中对计数器进行自增。

//当计数器数值等于了图片总个数，说明全部加载完成。此时可以调用waterfall()

var counter = 0;

imgs.forEach(img => {

let pic = new Image(); //创建一个图片对象

pic.src = img.src; //将图片对象的src进行了赋值。一旦给图片对象的src赋值，浏览器就会开始下载图片

pic.onload = function () {

//图片下载完成时，会触发该事件

counter++;

if (counter === imgs.length) {

waterfall();

}

pic.onerror = function () {

//图片下载失败，会触发这个事件

counter++;

if (counter === imgs.length) {

waterfall();

}

})

let boxes = imgs.map(obj => `

</div>

boxes = boxes.join('');

// console.log(boxes);

document.querySelector('.waterfall').innerHTML += boxes;

// waterfall();

} else {

//出错了

}

xhr.send()

}

//根据数据创建div.box的节点

}

</script>

</body>

</html>