<!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>瀑布流</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background-color: #eee;
}
.wrapper {
width: 980px;
margin: auto;
}
.wrapper li {
float: left;
width: 25%;
}
.wrapper li div {
margin: 10px;
background-color: #fff;
padding: 10px;
}
.wrapper li .item img {
width: 100%;
}
</style>
</head>
<body>
<!--
1. 封装简单ajax函数
2. 实现瀑布流效果
-->
<ul class="wrapper">
<li>
<div class="item">
<img src="./image/1.jpg" alt="">
<p>这是一张图片</p>
</div>
</li>
<li>
<div class="item">
<img src="./image/2.jpg" alt="">
<p>这是一张图片</p>
</div>
</li>
<li>
<div class="item">
<img src="./image/3.jpg" alt="">
<p>这是一张图片</p>
</div>
</li>
<li>
<div class="item">
<img src="./image/4.jpg" alt="">
<p>这是一张图片</p>
</div>
</li>
</ul>
<script src="./index.js"></script>
<script>
function getData() {
ajax('./data.json', 'GET', '', function (res) {
render(res);
flag = false;
}, true);
}
function getMinLi() {
var oLi = document.getElementsByTagName('li');
var minIndex = 0;
var minHeight = oLi[0].offsetHeight;
for (var i = 0; i < oLi.length; i++) {
if (oLi[i].offsetHeight < minHeight) {
minIndex = i;
minHeight = oLi[i].offsetHeight;
}
}
return {
minIndex,
minHeight
}
}
function render(res) {
var oLi = document.getElementsByTagName('li');
var imgWidth = oLi[0].getElementsByClassName('item')[0].offsetWidth;
for (var i = 0; i < res.length; i++) {
var item = document.createElement('div');
item.className = 'item';
var oImg = new Image();
oImg.src = res[i].img;
oImg.height = imgWidth * res[i].height / res[i].width;
var oP = document.createElement('p');
oP.innerText = res[i].desc;
item.appendChild(oImg);
item.appendChild(oP);
var index = getMinLi().minIndex;
oLi[index].appendChild(item)
}
}
var flag = false;
window.onscroll = function (e) {
var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop;
var minHeight = getMinLi().minHeight;
if (minHeight < clientHeight + scrollTop) {
if(!flag) {
flag = true;
getData();
}
}
console.log(clientHeight, window.innerHeight)
}
getData()
</script>
</body>
</html>
function ajax(url, type, data, success, flag) {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
success(JSON.parse(xhr.responseText))
} else {
console.log('error')
}
}
}
if (type == 'GET') {
xhr.open(type, url + '?' + data, flag);
xhr.send();
} else if (type == 'POST'){
xhr.open(type, url, flag);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
}